HTML web存储

HTML web存储

1、localStorage

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除。

<script>
		// 存储
		localStorage.setItem("name", "刘德华");
 
		// 查找
		document.getElementById("classname").innerHTML = "网站名：" +  localStorage.getItem("name");
</script>

2、sessionStorage

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

<script>
		// 存储
		sessionStorage.setItem("name", "刘德华");
 
		// 查找
		document.getElementById("classname").innerHTML = "网站名：" +  sessionStorage.getItem("name");
</script>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

1. 保存数据：localStorage.setItem(key,value);

2. 读取数据：localStorage.getItem(key);

3. 删除单个数据：localStorage.removeItem(key);

4. 删除所有数据：localStorage.clear();

3、区别

cookie、localstorage和sessionStorage三者的区别:

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效。

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效。

3、 localStorage的有效期是在不进行手动删除的情况下是一直有效的。

二、存储的大小不同

1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息。

2、 localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)。

三、与服务端的通信

1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

2、 localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信。

四、易用性

1、cookie需要程序员自己封装，源生的cookie接口不友好。

2、 localStorage和 sessionStorage源生接口可以接受，也可以再次封装。

---

• 失联

最后编辑时间 2023，09，11 ；21：09