cookie、sessionStorage、localStorage

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1448844

一、cookie

http协议是无状态的协议，即一次数据交互完成后，服务器与客户端断开连接，并不会记录此次会话的状态，所以出现了cookie，用于跟踪交互双方的会话状态。

cookie的内容：采用key1=value1；key1=value1...键值对的方式存储，键名可以自定义，但是有部分键名为保留字段，如expires、path等；

cookie的过期时间：使用键名expires设置；

cookie的路径：使用键名path，它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页、该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

1）设置cookie

javascript view plain copy

1. document.cookie="fname=suifeng;lname=nifeng";

2）读取cookie

i.获取cookie的内容

javascript view plain copy

1. var data = document.cookie;

ii.解析cookie

方式1：截取字符串

判断"key="字符串的位置，然后使用substring或者substr方式截取字符串，然后判断";"，余下该段则为value。代码如下：

javascript view plain copy

1. function getCookieValue(key){
2. var data = document.cookie;
3. var index = data.indexOf(key + "=");
4. return (index === -1) ? false : data.substring(index + key.length+1).split(";")0;
5. }

方式2：使用正则表达式+json

javascript view plain copy

1. function getCookieValue(key) {
2. return JSON.parse("{\""+document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim,"\":\"")+"\"}")key;
3. }

iii.清除cookie

方式1：设置value为null（所有的）

方式2：设置过期时间为当前日期之前，比如1970.1.1

二、localStorage

长期存储数据，浏览器关闭后不丢失。

1.特点：数据永久存储，没有时间限制；大小限制5M；只存储字符串；

2.数据存取方式

i.getItem（key）获取数据

ii.setItem（key，value）设置数据

iii.removeItem（key）移除数据

iv.clear（）清空数据

3.事件监听

javascript view plain copy

1. function handleFunc(e) {
2. //对象e为localStorage对象，chrome、firefox支持差,IE支持较好
3. }
5. window.addEventListener('storage',handleFunc,false);
6. window.attachEvent('onstorage',handleFunc);

三、sessionStorage

和localStorage差不多，不多赘述。

四、他们之间的区别（对比）

相同点：都存储在客户端

不同点：

1）存储大小

i.cookie数据大小不能超过4k；

ii.sessionStorage和localStorage可以达到5M或者更大；

2）有效时间

localStorage存储持久数据，浏览器关闭后数据不会丢失，除非主动删除数据；

sessionStorage数据在当前浏览器窗口关闭后自动删除；

cookie在设置的cookie过期时间之前一直有效。默认关闭浏览器自动删除；

3）与服务器的交互

i.cookie的数据会自动传递到服务器，服务器也可以cookie到客户端。cookie是客户端和服务端数据交互的媒介之一。

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