博客

一，前言

1.浏览器提供了三种常用储存方式可以在浏览器中对数据进行保存，分别是

localStorage

、

sessionStorage

和

cookie


2.其中

cookie

兼容性最好，

localStorage

和

sessionStorage

在

IE8

以上都是支持的。

二，

cookie

介绍

1.

cookie

是最早的存储数据的方式。

2.

设置

cookie


（1）基本方式：


document.cookie = 'key=value'


（2）使用

expires

设置过期时间：


document.cookie = 'key=value;expires=GMT(格林威治时间)格式的日期型字符串;'


，注意是字符串

//设置5分钟后过期
document.cookie = `username=123; expires=${new Date(new Date().getTime() + 5 * 60 * 1000).toGMTString()}`

（3）当没有设置

expires

时，

cookie

是临时的，页面关闭时就会删除。

（4）我们可以在开发者工具上查看存储的

cookies


3.

读取

cookie


（1）访问所有的

cookie

，返回字符串：


document.cookie


（2）注意在

cookie

中没有获取某个

key

的原生方法，要达到这个目的要自己对字符串进行处理，注意分割

;

之后有一个空格

4.

删除

cookie


（1）


document.cookie='key=value;expires=过去的时间'


：将过期时间设为过去的时间即可删除相应的

cookie


document.cookie = `username=; expires=${new Date(0).toGMTString()}`

5.存储在

cookie

中的数据，每次都会被浏览器自动放在

http

请求中。

6.一个域名下存放的

cookie

的个数是有限制的，不同的浏览器的限制都不太一样，建议

<30

个。

7.每个

cookie

存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为

4KB

。

二，

sessionStorage


1.用于本地存储一个会话中的数据，

在浏览器关闭时删除数据，不能用于长期的储存

。

2.只有同源的页面才能访问，单标签页，两个相同的页面

sessionStorage

,不能互相访问。

3.

设置

sessionStorage


（1）


sessionStorage.setItem(key,value)


4.

访问

sessionStorage


（1）根据

key

值取值：


sessionStorage.getItem(key)


5.

删除

sessionStorage


（1）根据

key

值删除：


sessionStorage.removeItem('username')


（2）一次性删除所有存储：


sessionStorage.clear()


6.

获取所有

sessionStorage


（1）

sessionStorage.valueOf()

：以对象形式返回所有存储的

sessionStorage


7.

sessionStorage

存储大小一般是

5MB


三，

localStorage


1.持久化的本地存储，除非主动删除数据，否则数据是永远不会过期

2.

存储的信息在同一域中是共享的

3.

localStorage

的使用方式和

sessionStorage

是一样的

4.

设置

localStorage


（1）


localStorage.setItem(key,value)


5.

访问

localStorage


（1）根据

key

值取值：


localStorage.getItem(key)


6.

删除

localStorage


（1）根据

key

值删除：


localStorage.removeItem('username')


（2）一次性删除所有存储：


localStorage.clear()


7.

获取所有

localStorage


（1）

localStorage.valueOf()

：以对象形式返回所有存储的

sessionStorage


8.

localStorage

存储大小一般是

5MB


四，

cookie

，

localStorage

，

sessionStorage

三者的区别

1.

localStorage

只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份

2.

sessionStorage

比

localStorage

更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下

3.

cookie

的数据会在每一次发送

http

请求的时候，同时发送给服务器,而

localStorage

、

sessionStorage

不会。

4.

cookie

的储存大小是

4kb

，

sessionStorage

和

localStorage

存储大小一般是

5MB