web存储
什么是web存储?
web存储指的是在web通信过程中,由客户端(如浏览器)对少量数据进行的本地存储(注:本文所说的是广义的web存储,而不单指Web Storage)。web存储类型主要包括古老的cookie,以及HTML5推出的sessionStorage、localStorage和indexedDB等。
web存储的宿主环境通常是浏览器,借助浏览器提供的JavaScript接口,我们可以实现对这些数据的增删改查。
web存储分为cookie和webStorage存储,而webStorage存储分为sessionStorage(会话存储)和localStorage(本地存储)。
cookie
cookie的特点:
1、cookie是产生于服务器端,保存于客户端中。
2、只针对于服务器,同一服务器可以共享cookie的数据
3、存储少量数据,最大只能存储4KB
我们通常通过js来产生cookie,通过js-cookie这个库来操作cookie
- 通过set方法来将数据存储到cookie中
- 参数为 key value 设置过期时间
- {expires:7} 表示七天有效
Cookies.set('name','zhangsan',{expires:7})
- 通过get方法来获取数据,同一服务器可以共享数据
- 参数为键名
Cookies.get('name')
- remove方法是移除cookie
- 参数:键名
Cookies.remove('name')
sessionStorage
会话存储的特点:
1、会话存储是针对于浏览器的选项卡来说的,只要选项卡关闭,会话就失效
2、跟cookie相比,能够存储的数据可以达到5MB
- 通过setItem()方法来放入数据
- 参数 键 值
sessionStorage.setItem('name','zhangsan')
- 通过getItem()方法来获取数据
- 参数 键名
sessionStorage.getItem('name')
- 通过removeItem来移除会话存储
- 参数 键名
sessionStorage.removeItem('name')
- 通过clear()方法来清除所有会话
sessionStorage.clear()
localStorage
本地存储的特点:
1、将数据存储到本地磁盘,即使选项卡和浏览器关闭,数据依旧存在
2、除非手动删除,要不然数据会一直存在本地当中
3、传输的数据可以达到5M
- 通过setItem()方法来放入数据
- 参数 键 值
localStorage.setItem('name','产品名称')
- 通过getItem()方法来获取数据
- 参数 键名
localStorage.getItem('name')
- 通过removeItem来移除会话存储
- 参数 键名
localStorage.removeItem('name')
- 通过clear()方法来清除所有会话
localStorage.clear()
localStorage和sessionStorage的异同
相同点:
1、.从原理上来说,两者都属于浏览器端存储。前者称为“会话存储”,后者称为“本地存储”。它们都被部署在window对象上,因此可以通过window对象来调用。
2、两者的使用的方法是一样的。
3、两者都遵循同源策略。即该存储只在同一个域下可以共享,跨域无法访问,这样可以保证数据的安全性。
4、localStorage和sessionStorage各自拥有5MB的存储空间,并且只能保存字符串类型的数据。
不同点:
1、两者的失效时间是不同的。localStorage是手动删除才会失效,sessionStorage是关闭选项卡就失效。
2、两者的有效范围不同。localStorage可以跨页签生效,而sessionStorage仅在当前页签范围内有效。