web存储（cookie、sessionStorage、localStorage）

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仅在当前页签范围内有效。