浏览器数据存储方式总结---localStorage、sessionStorage、cookie

1、cookie

1.1、cookie的作用

说到cookie，其实cookie有两个主要功能，

• 用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态
• 也就是我们现在也经常使用cookie在客户端存储一些数据

1.2、cookie的构成

document.cookie="key=value"

key和value是包含在一个字符串中

一般来说，cookie是由浏览器保存的以下几块信息构成的

• name 这个name为自己取的cookie名称，同名的值会覆盖
• domain 可以访问此 cookie 的域名
• path ，可以访问此 cookie 的页面路径
• Expires/Max-Age 设置失效时间，分别是到期时间(Expires) / 持续时间 (单位是秒)（Max-Age）
• http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js去读取或修改
• Size， 此 cookie 大小。
• secure 字段，设置是否只能通过 https 来传递此条 cookie

1.3、如何使用cookie存储数据

一般来说，有两种方式可以生成cookie

• 一种是服务器发送http响应时指定Set-Cookie进行指定，
• 另一种我们可以使用js生成cookie

由于cookie需要通过URL编码，因此在写入cookie时和读取cookie时我们都需要进行编码和解码操作,可以采用js-cookie插件来读取/设置cookie

1.4、cookie的缺点

（1）cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB
（2）浏览器会主动存储后台接口返回的 set-cookie 头信息，在浏览器本地设置cookie值
（3）通过 Expires(到期时间) / Max-Age(持续时间 ----单位是秒)、设置时效性，如果不设置，关闭清空cookie,
（4）可以设置 http-only 属性为 true ，禁止客户端代码（js）修改该值

1.5、cookie常用方法

原生js操作cookie的方法

//设置cookie
document.cookie = `${key}=${value};`

//获取cookie，
// 返回值是当前域名下的所有cookie，并按照某种格式组织的字符串 ：key=value;key1=value1;......keyn=valuen
let allCookies = document.cookie;     //再以 “; ”来切割

封装后的cookie操作方法

//设置cookie
function setCookie(name,value,options={}){
    let cookieData = `${name}=${value};`;
    for(let key in options){
        let str = `${key}=${options[key]};`;
        cookieData += str;
    }
    document.cookie = cookieData;
}

//获取cookie
function getCookie(name){
    let arr = document.cookie.split("; ");
    for(let i=0;i<arr.length;i++){
        let items = arr[i].split("=");
        if(items[0]==name){
            return items[1];
        }
    }
    return "";
}

1.6、cookie总结

• cookie 在过期时间之前一直有效，即使窗口或浏览器关闭
• 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
• 浏览器会主动存储接收到的 set-cookie 头信息的值
• 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
• 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
• 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
• 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)

1.7、cookie 的常用场景：

• 保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了
• 跟踪用户行为。通过cookie记住用户操作行为，当下次再打开该页面时，自动默认该行为。比如说：不同用户所在地区的天气情况只要设置一次，下次打开就是之前设置的地方的天气。或者说网站的换肤功能等。

1.8、cookie 有哪些编码方式？

参考回答： encodeURI（）

2、本地缓存Storage----- sessionStorage、localStorage

2.1、使用方法

• 设置

  setItem(key, value) 添加或更新（如果数据项中已存在该key）数据项中指定key的value

• 获取

  getItem(key)获取数据项中指定key对应的value

• 移出指定数据

  removeItem(key) 删除数据项中指定key的value

• 清空所有数据

  clear() 清空所有数据项

2.2、不同点

localStorage

• 窗口或浏览器关闭也一直保存，始终有效，因此用作持久数据
• 在所有同源窗口 (ip+port相同) 中都是共享的
• 支持 storage 事件

sessionStorage

• 仅在当前浏览器窗口关闭前有效
• 页面私有，只在当前窗口拥有，即使地址相同，再打开一个新窗口，也没有
• 不支持 storage 事件

cookie

• 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

2.3、共同点

localStorage和sessionStorage和cookie共同点

• 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同 则时同源，否则为 跨源/跨域
• 存储的内容都会转为字符串格式
• 都有存储大小限制

localStorage和sessionStorage共同点

• API相同
• 存储大小限制一样基本类似
• 无个数限制

lcookie

• 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
• 浏览器会主动存储接收到的 set-cookie 头信息的值
• 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
• 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
• 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
• 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)

2.4、同一浏览器的同源但不同标签页间，可以共享 localStorage，但是无法共享sessionStorage的详细说明

localStorage不同窗口共享
即A窗口新增/修改localStorage的值，那么B窗口也会新增/修改相应的值，两个窗口的localStorage数据是同步的。

sessionStorage不同窗口之间无法共享

• 1、刷新页面sessionStorage不会清除
• 2、打开多个相同的URL的Tab窗口，会创建各自的sessionStorage。
• 3、关闭对应tab窗口，会清除对应的sessionStorage。
• 4、在当前窗口打开一个新的同源窗口时，会复制当前窗口的session数据到新的窗口。
  但是如果你不从当前窗口处打开，而是直接打开一个新的同源窗口，那么浏览器并不会复制之前同源窗口的session数据到新的窗口，而是会创建一个新的sessionStorage
  <----注意！！！！！！！！！！！

3、cookie、localStorage、sessionStorage之间的区别

• 1、请求时是否会自动携带
  cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 2、存储大小限制不同
  cookie数据不能超过4k，很多浏览器都限制一个站点最多保存 20 个 。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 3、数据有效期不同

1. sessionStorage：仅在当前浏览器窗口关闭前有效，即当前窗口关闭后数据就会被清空；
2. localStorage：始终有效，窗口或浏览器关闭也一直存在，没有有效期，除非删除，否则一直存在；
3. cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

• 4、作用域不同

4. sessionStorage 限制在单个标签页中
5. localStorage 在所有同源窗口中都是共享的；
6. cookie 在所有同源窗口中都是共享的。

• 5、是否支持 storage 事件-----监听变化
  localStorage支持storage事件
  sessionStorage、cookie不支持；

• 6、Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

• 7、存放位置
  cookie 数据存放在客户的浏览器上，session 数据放在服务器上。

cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗 考虑到安全应当使用 session。

session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用 COOKIE。

4、IndexedDB

4.1、为什么会有IndexedDB

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 存储上限在 5MB 左右，而且不提供搜索功能，不能建立自定义的索引，所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景

4.2、什么是IndexedDB

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作，IndexedDB 允许储存大量数据，提供查找接口，还能建立索引，这些都是 LocalStorage 所不具备的，就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库.

4.3、IndexDB的优点

• a、键值对储存
• b、异步： IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的，异步设计是为了防止大量数据的读写，拖慢网页的表现
• c、支持事务： IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况
• d、同源限制：IndexedDB 受到同源限制，每一个数据库对应创建它的域名，网页只能访问自身域名下的数据库，而不能访问跨域的数据库
• e、储存空间大： IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限
• f、支持二进制储存：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

4.4、IndexDB的缺点

• a、不支持DO操作；
• b、不能跨域

IndexDB参考链接：https://blog.csdn.net/qq_39958056/article/details/125524904

参考链接：https://zhuanlan.zhihu.com/p/159268611