【前端面试指南】JS-9-web-API-存储

1. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

   1. cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

2. cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

   3. sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

3. 存储大小：

   1. cookie 数据大小不能超过 4k。
   2. sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
   3. 有效期（生命周期）：
      1. localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
      2. sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
   4. cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
   5. 共享：
   6. sessionStorage 不能共享，
      2. localStorage 在同源文档之间共享，
   7. cookie 在同源且符合path规则的文档之间共享

4. cookie

   1. 本身用于浏览器和server通讯，被"借用”到本地存储来。

   2. 方法

      document.cookie='a=100'
      document.cookie='b=200'
      document.cookie  // "a=100; b=200"
      

   3. 缺点

      1. 存储大小，最大4KB。

      2. http 请求时需要发送到服务端，增加请求数据量。

      3. 只能用 document.cookie =’…’ 来修改，太过简陋。

5. localStorage 和 sessionStorage

   1. 特点

      1. HTML5专门为存储而设计，最大可存5M.

      2. API简单易用 setItem、 getItem

         localStorage.setItem('a',100)
         localStorage.getItem('a') // "100"
         
         sessionStorage.setItem('b',200)
         sessionStorage.getItem('b') // "200"
         

      3. 不会随着 http 请求被发送出去

   2. 区别

      1. localStorage 数据会永久存储，除非代码或手动删除。
      2. sessionStorage 数据只存在于当前会话，浏览器关闭则清空。
      3. 一般用 localStorage 会更多些

6. cookie、localStorage、sessionStorage区别

   1. 容量
   2. API易用性
   3. 是否跟随http请求发送出去

7. Cookie、LocalStorage、 SessionStorage、Session

   1. Cookie 和 LocalStorage
      1. 主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会
      2. Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
   2. LocalStorage 和 SessionStorage
      1. LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在回话结束时过期（如关闭浏览器）
   3. Cookie 和 Session
      1. Cookie 存在浏览器的文件里，Session 存在服务器的文件里
      2. Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie 里