localStorage、sessionStorage同一网站下共享问题

来自美团面试题 https://www.nowcoder.com/discuss/1066911?source_id=discuss_experience_nctrack&channel=-1

浏览器存储数据的方式有哪些？同源网站的两个页面之间能共享 sessionStorage 数据吗？

浏览器存储方式

Cookie

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。

Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。

Cookie的特性：

• Cookie一旦创建成功，名称就无法修改
• Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie
• 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
• 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的
• Cookie在请求一个新的页面的时候都会被发送过去

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

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

Cookie的使用场景：

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

LocalStorage

LocalStorage的优点：

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

LocalStorage的缺点：

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

LocalStorage的使用场景：

• 有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可
• 在网站中的用户浏览信息也会存储在LocalStorage中，还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中

SessionStorage

SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

SessionStorage与LocalStorage对比：

• SessionStorage和LocalStorage都在本地进行数据存储；
• SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能够共享；
• LocalStorage和SessionStorage都不能被爬虫爬取；

SessionStorage的使用场景

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

同源情况下localStorage和sessionStorage

同源的连个标签页下，localStorage可以互相读写，相互影响。

sessionStorage有两种情况

第一种情况

网站X通过标签页a打开了标签页b，会从标签页a中拷贝一份seesionStorage存入标签页b，在标签页b中修改seesionStorage不会影响标签页a中的数据。

这里的从标签页a中打开标签页b包括使用标签和js代码。（a / window.open()）

第二种情况

在标签页a中打开网站x的一个页面，在标签页b中打开网站x的另一个页面，会初始化两份seesionStorage，即使是同一个网站。