项目问答

localStorage,sessionStorage和cookie的区别

1. 生命周期

   1. cookie

      1. 具有max-age属性: 存入内部的数据, 只要没有超过最大存活时间, 就会永久保留
      2. 不具有max-age属性: 这类cookie被称为会话级cookie, 当用户关闭标签页或者浏览器, 数据就会丢失

   2. localStorage(持久化存储) : 只要不主动去删除, 就会永久保存

   3. sessionStorage(会话级存储) : 在关闭标签页或者关闭浏览器的时候, 就会丢失

2. 存储位置

   1. cookie

      1. 有max-age属性: 存储在硬盘里
      2. 无max-age属性: 存储在内存中

   2. localStorage: 存储在硬盘中

   3. sessionStorage: 存储在内存中

3. 存储大小

   1. cookie: 4KB
   2. localStorage: 一般5MB, IE是3012KB
   3. sessionStorage: 一般5MB, IE是3012KB

4. 作用范围

   1. cookie , 受到两个属性的控制

      1. domain属性: 比如domain为".baidu.com", 表示只有该域名以及它的子域名可以读取
      2. path属性: 比如path为"/a", 表示只有该路由以及它的子路由可以读取

   2. localStorage: 只要地址相同, 哪怕是不同的标签页,都可以同步更新

   3. sessionStorage: 地址相同, 不同的标签页可以获取数据, 但是这个数据不是同步更新的, 也就是修改了一个标签页, 另一个不会更新

5. 与服务器的关系

   1. cookie

      1. cookie更像是被服务器借用的本地存储
      2. 浏览器会自动存储cookie, 还会自动发送cookie
      3. 服务器如果想要返回cookie, 那么就会在响应头中, 添加属性setCookie属性, 用于返回数据
      4. 浏览器如果想要返回cookie数据给服务器, 那么就会在请求头中, 添加Cookie属性用于发送数据

   2. localStorage: 他是HTML5新特性,与服务器不熟

   3. sessionStorage: 他是HTML5新特性,与服务器不熟

6. 使用场景

   1. cookie: 可以节省服务器的成本
   2. localStorage: 如果是关闭项目之后还要使用的数据, 选择使用localStorage存储
   3. sessionStorage:如果有一个数据, 只在项目关闭之前使用, 考虑到运算速度, 会使用sessionStorage4

‍