网络Web存储之LocalStorage

LocalStorage介绍

定义

LocalStorage 是HTML5提供的一种客户端存储机制，属于Web存储API的一部分。它允许网页在用户的浏览器中存储键值对数据，这些数据会以持久化的方式保存，除非用户手动清除浏览器缓存，或者通过 JavaScript代码进行删除操作，否则数据将一直存储在用户的本地浏览器中。

从技术角度来看，LocalStorage 是 window 对象的一个属性，是一个存储对象，它提供了一些简单的方法来操作存储的数据，如 setItem、getItem、removeItem 和 clear 等，以实现数据的存储、读取、删除和清除所有数据的功能。

特点

• 持久性: LocalStorage存储的数据是永久的，除非用户主动清楚浏览器缓存或使用JavaScript代码删除，否则数据将一直保留在浏览器中。
• 同源策略: 遵循同源策略，即不同源的页面无法访问彼此的LocalStorage数据，这里的同源指的是协议、域名和端口都相同。
• 容量较大: 一般来说，浏览器对 LocalStorage 的存储空间限制相对较大，通常可以达到 5MB 甚至更多，具体大小因浏览器而异。
• 简单易用: 提供了简单的 API，方便开发者进行数据的存储、读取和删除操作。
• 与服务器无关: 数据存储在本地浏览器，不需要与服务器进行交互，读取数据时可以直接从本地获取，提高了数据访问的速度，减轻了服务器的负担。

兼容性

LocalStorage 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 等。然而，在一些旧版本的浏览器或某些特殊环境下，可能存在兼容性问题。在使用 LocalStorage 时，可以通过检测window.localStorage是否存在来判断浏览器是否支持 LocalStorage。例如：

if(typeof window.localStorage !== 'undefined') {
   
	//浏览器支持LocalStorage，，可以进行相关操作
} else {
   
	//浏览器不支持LocalStorage，给出提示或其他替代方案
	console.log("浏览器不支持LocalStorage");
}

常用方法

存值

存值方式一共有三种。

• localStorage.setItem(key,value);
• localStorage[key] = value
• localStorage.key = value

用于将键值对存储到 LocalStorage 中。如果键已经存在，则更新其对应的值；如果键不存在，则创建一个新的键值对。注意：键和值的格式。例如：

//存储值
//第一种方式
localStorage.setItem('name', 'John');
//第二种方式
localStorage[&#