一,前言
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