cookie、sessionStorage和localStorage的区别

小灰灰 2023-10-05 14:24 5阅读 0赞

HTML5的WebStorage提供了两种前端页面本地存储数据的对象：localStorage（本地持久化硬盘存储）和sessionStorage（会话级内存存储）

**1）WebStorage设计的目标即为：提供一种在cookie之外本地存储会话数据的路径，提供一种存储大量可以跨会话存在的数据的机制**  
**2）localStorage生命周期是永久**，这意味着除非用户用浏览器提供的清除功能来清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信  
**3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后会被清除**。存放数据大小为一般为5MB,而且它也仅在客户端（即浏览器）中保存，不参与和服务器的通信。  
**4）作用域的不同**：  
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），即使相同窗口但是不同源（域名+端口）页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，何为会话顶级窗口：比如360浏览器，你点开一个为一个顶级窗口，在这个基础上登录成功记录新开的标签都属于sessionStorage互访范围之内。即会话范围共享，关闭窗口清除  
**5）存储大小**：  
localStorage和sessionStorage的存储数据大小一般都是：5MB  
**6）存储位置**：  
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信  
**7）存储内容类型**：  
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理  
**8）获取方式**：  
localStorage：window.localStorage;；sessionStorage：window.sessionStorage;  
**9）应用场景**：  
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录  
**10）WebStorage较Cookie的优点**：  
存储空间更大：cookie为4KB每个站点20条记录，而WebStorage是5MB，几乎可以说是海量  
节省网络流量：WebStorage不与服务端交互，存储在本地的数据前端页面可以直接获取并操作，不会像cookie一样每次请求都会携带cookie传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量  
**对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage将会是最佳选择，切会非常方便**  
**快速显示**：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快  
**安全性**：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题  
WebStorage提供了一些直接操作方法，数据操作比cookie更加方便简单高效  
setItem (key, value) —— 保存数据，以键值对的方式储存信息。  
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。  
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。  
clear () —— 删除所有的数据  
key (index) —— 获取某个索引的key