cookie、localStroage与sessionStorage的区别以及用法

cookie

cookie是服务器发给客户端的特殊信息, 以文本形式存储在客户端,每次请求都会带上cookie

保存在浏览器端

保存时间

  • 设置过期时间,浏览器关闭后不会清除,保存在硬盘中, 过期时间到期后失效
  • 不设置过期时间, 保存在内存中, 浏览器关闭后消失

    单个cookie大小不能超过4kb

    安全性较低, cookie截获, cookie欺骗

    应用场景

  • 判断用户是否登陆过网站, 以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。
  • 保持上次登录的时间等信息
  • 保存上次登录查看的页面
  • 浏览计数

    缺点

  • 大小受限
  • 用户可以禁用cookie, 使功能受限
  • 安全性较低
  • 有些状态不能保存在客户端
  • 每次访问都要传送cookie给服务器,浪费带宽。
  • cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

webStorage

localStorage(本地储存)

永久储存, 除非主动删除, 否则不会消失

sessionStorage(会话储存)

  • 仅在当前会话下有效
  • 在同源窗口始终存在, 浏览器关闭之前
  • 浏览器打开新的同源页面
  • 页面刷新 都还存在
  • 打开一个新的浏览器窗口同一个页面, 同源的session也是不一样的

两者的存储大小都是5MB

都保存在客户端不与服务器端进行交互

只能储存字符串类型

  • 对于复杂的json格式可以进行stringify和parse来处理

    获取方式

  • window. localStroage
  • window. sessionStorage

    应用场景

  • localStroage: 长期登录+判断用户是否登录, 长期存储在本地的数据
  • sessionStorage: 敏感的一次性登录

    优点

  • 储存空间大
  • 节省网络流量
  • 可在本地直接获取
  • 不需要与服务器进行交互
  • 获取速度块
  • 安全性较高
  • API
    1. window. localStroage
    2. window. sessionStorage
    3. setItem(key, value): 保存某个数据
    4. getItem(key): 获取某个数据
    5. removeItem(key): 删除某条数据
    6. clear(): 清除所有数据
    7. key(index): 根据索引获取第几条数据的键名
坚持原创技术分享,您的支持将鼓励我继续创作!