浏览器本地存储Cookie、LocalStorage、SessionStorage用法与区别总结

😎 Cookie

Cookie是最早被提出来的本地存储⽅式，在此之前，服务端是⽆法判断⽹络中的两个请求是否是同⼀⽤户发起的，为解决这个问题，Cookie就出现了。Cookie的⼤⼩只有4kb，它是⼀种纯⽂本⽂件，每次发起HTTP请求都会携带Cookie。

Cookie的特性：

• Cookie一旦创建成功，名称就无法修改
• Cookie是无法跨域名的
• 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
• 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也无事于补，无需知道Cookie的意义，只要转发Cookie就能达到目的
• Cookie在请求一个新的页面的时候都会被发送过去

如果需要域名之间跨域共享Cookie,有两种方法:

• 使用Nginx反向代理
• 在一个站点登陆之后，往其他网站写Cookie。服务端的Session存储到一个节点，Cookie存储sessionId

Cookie使用场景：

• 最常见的场景就是Cookie和session结合使用，我们将sessionId存储到Cookie中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。
• 可以用来统计页面的点击次数

🤓 LocalStorage

LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

LocalStorage的优点：

• 在大小方面，LocalStorage的大小一般为5MB，可以存储更多信息
• LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
• 仅存储在本地，不像Cookie那样每次请求都会被携带

LocalStorage的缺点：

• 存在浏览器兼容问题
• 如果浏览器设置为隐私模式，那么我们将无法读取到LocalStorage
• LocalStorage收到同源策略的限制，即端口、协议、主机地址有任何一个不相同都不会访问

LocalStorage的使用场景：

• 网站一些不常变动的个人信息存储在LocalStorage中
• 在网站中的用户浏览信息也会存储在LocalStorage中

🫣 SessionStorage

SessionStorage和LocalStorage都是在HTML5才提出的存储方案，SessionStorage主要用于临时保存统一窗口(标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

SessionStorage的使用场景：

• 由于SessionStorage具有时效性，所以可以用来存储一些网站的游客登陆的信息，还有临时的浏览器记录信息。当关闭网站之后，这些信息也就随之消除了。

SessionStorage和LocalStorage对比

• 两者都在本地进行数据存储
• 两者都有同源策略的限制，而SessionStorage更严格，它只有在同一浏览器的同一窗口下才能共享
• 两者都不能被爬虫爬取

Cookie、LocalStorage、SessionStorage区别

• Cookie：其实最开始是服务器端⽤于记录⽤户状态的⼀种⽅式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的⽣存时间由 expires属性指定，并且 cookie 只能被同源的⻚⾯访问共享。
• SessionStorage：html5 提供的⼀种浏览器本地存储的⽅法，它借鉴了服务器端 session 的概念，代表的是⼀次会话中所保存的数据。它⼀般能够存储 5M 或者更⼤的数据，它在当前窗⼝关闭后就失效了，并且sessionStorage 只能被同⼀个窗⼝的同源⻚⾯所访问共享。
• LocalStorage：html5 提供的⼀种浏览器本地存储的⽅法，它⼀般也能够存储 5M 或者更⼤的数据。它和 sessionStorage 不同的是，除⾮⼿动删除它，否则它不会失效，并且 localStorage 也只能被同源⻚⾯所访问共享