localStorage、sessionStorage、Cook

H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，而Web Storage提供了两种存储类型 API： sessionStorage 和 localStorage，二者的差异主要是数据的保存时长及数据的共享方式。
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

localStorage和sessionStorage使用时使用相同的API：

 localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

 localStorage.getItem("key");//获取名称为“key”的值

 localStorage.removeItem("key");//删除名称为“key”的信息。

 localStorage.clear();​//清空localStorage中所有信息

在H5中，window对象里面有一个storage事件，我们可以进行监听或者指定其事件处理函数的方法，在其他页面修改了sessionstorage或者localstorage中的值时，就会触发注册了storage事件。

我们先看一下几个属性：
1、event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。

2、event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。

3、event.newValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改后的值

4、event.url 属性：属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址

5、event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象

localStorage的监听：

<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.key = key;
        setItemEvent.newValue = newValue;
        setItemEvent.oldValue = localStorage.getItem(key);
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        console.log('key: '+e.key);
        console.log('newValue: '+e.newValue);
        console.log('oldValue: '+e.oldValue);
    });
    localStorage.setItem("nm","1234");
</script>

localStorage和sessionStorage的优缺点

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

cookie和session

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

 Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

Cookie cookie = new Cookie("username","helloweenvsfei"); // 新建Cookie
cookie.setMaxAge(int maxAge); // maxAge为正代表其在maxAge秒后自动消失，
//maxAge为负则表示该Cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该Cookie即失效。
// 如果maxAge为0，则表示删除该Cookie。
cookie.setDomain(".helloweenvsfei.com"); // 设置域名 Cookie是不可跨域名的。
//domain参数必须以点(".")开始。
cookie.setPath("/"); // 设置路径
cookie.setSecure(true); // 设置安全属性可以设置Cookie的secure属性为true。
//浏览器只会在HTTPS和SSL等安全协议中传输此类Cookie。
response.addCookie(cookie); // 输出到客户端

使用时一定要注意。

• domain表示的是cookie所在的域，默认为请求的地址，如网址为www.test.com/test/test.aspx，那么domain默认为www.test.com。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。

• path表示cookie所在的目录，默认为/，就是根目录。在同一个服务器上有目录如下：/test/,/test/cd/,/test/dd/，现设一个cookie1的path为/test/，cookie2的path为/test/cd/，那么test下的所有页面都可以访问到cookie1，而/test/和/test/dd/的子页面不能访问cookie2。这是因为cookie能让其path路径下的页面访问。

• 浏览器会将domain和path都相同的cookie保存在一个文件里，cookie间用*隔开

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

原因如下：
（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

（4）sessionID是加密的

（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

（2）保存上次登录的时间等信息。

（3）保存上次查看的页面

（4）浏览计数

image.png

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

（1）网上商城中的购物车

（2）保存用户登录信息

（3）将某些数据放入session中，供同一用户的不同页面使用

（4）防止用户非法登录

7、缺点：cookie：（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）有些状态不可能保存在客户端。

（5）每次访问都要传送cookie给服务器，浪费带宽。

（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

localStorage进行缓存

LS使用：（https://www.jianshu.com/p/0fa0bf842bbb）

PC上应用价值不大：
兼容性不太好，不支持LS的浏览器比例仍然很大

网络速度快，协商缓存响应快，LS读取+eval很多时候会比不上304

通常需要SEO，导致css不能缓存，仅缓存js使得整个缓存方案意义进一步减小

浏览器本地缓存足够可靠持久

跨页面间共享缓存即便有浪费也差别不大

移动端webapp值得一试：
兼容性好

网速慢，LS读取+eval大多数情况下快于304

webapp不需要seo，css也可以缓存，再通过js加载

浏览器缓存经常会被清理，LS被清理的几率低一些

取出localstorage的代码不一定要eval，eval函数很有可能影响整个js文件的压缩（出现eval之后不能对变量名进行替换）,可以通过一些hack避免这种压缩问题。

LS问题还是有的。https://www.zhihu.com/question/28467444

1、Safari 处于隐私模式时，LS set 数据会抛异常

2、不同移动端浏览器，对单次set数据大小是有区别的，3-5M

3、不同移动端浏览器对LS总容量大小是有区别的，5-10M

localStorage与cookie解决跨域问题

https://www.haorooms.com/post/kuayu_localstorage_cookie//cookie跨域解决方案
https://blog.csdn.net/sflf36995800/article/details/53290457//localstorage跨域解决方案