localStrorage sessionStorage cookie

Posted 2020-08-21

 

 

 

html5中增加了两种全新数据存储方式：Web Storage和Web SQL Database. 前者可用于临时或永久保存客户端的少量数据；后者是客户端本地化的一套数据库系统，可将大量数据保存在客户端，无需与服务端交互。极大的减轻了服务端的呀，加快了页面浏览的速度。

Web Storage分为会话数据与长期数据，sessionStorage(保存会话数据)，localStorage(在客户端长期保存数据)。可以将客户端数据分类型进行存储，使它在运用上优越于传统、单一的Cookie

 

sessionStorage：该数据实质上是被保存在session对象中。保存用户临时会话数据；一旦关闭浏览器，所有数据都会消失。sessionStorage.setItem(key,value); sessionStorage.getItem(key)

 

localStorage:该对象可将数据长期保存在客户端，即使是重新打开浏览器也不会丢失，如果要清除对象保存内容，需调用localStorage.removeItem(key)。localStorage.setItem(key,value); localStorage.getItem(key);

localStorage.clear()清楚全部的数据

 

cookies：将数据保存在用户的客户端，存在于用户硬盘文件上。其缺点是：限制保存数据空间大小、数据保密性差、代码操纵复制等。

 

sessionStorage、localStorage和cookie区别？

1.数据的有效性不同。sessionStorage仅在当前浏览器中有效，关闭浏览器数据消失。localStorage关闭浏览器也有效。cookie只在设置cookie过期时间内有效，无论浏览器是否关闭。

2.作用域不同。sessionStorage不在不同浏览器窗口中共享。localStorage在所有同源窗口中共享；cookie也是所有同源窗口中共享。

 

为什么选择Web Storage而不是Cookie？

web Storage的优势有：

1. 存储空间比cookie大

2. 存储内容不会发送到服务器。而cookie的内容会随着请求一并发送到服务器，这对于本地存储是一种宽带浪费。

3. 独立的存储空间。不会造成数据混乱。

4.更多丰富易用的接口，使数据操作更为简单