前端本地存储：cookie，sessionStorage和localStorage

一，前言

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

2.其中cookie兼容性最好，localStorage和sessionStorage在IE8以上都是支持的。

二，cookie介绍

1.cookie是最早的存储数据的方式，因为http是无状态的，cookies可以让http变得有状态

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只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份；sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下

2.cookie的数据会在每一次发送http请求的时候，同时发送给服务器,而localStorage、sessionStorage不会。

3.cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

4.cookie的储存大小是4kb且有数量限制，sessionStorage和localStorage存储大小一般是5MB