网络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['name'] = 'john';
//第三种方式 第三种键值格式与前两种有差别
localStorage.name = 'john';
//更新
localStorage.setItem('name','sam');
//其他两种同样

取值

取值方式与存值方式类似，也有三种。

• localStorage.getItem(key)
• localStorage[key]
• localStorage.key

根据指定的键获取对应的值。如果键不存在，则返回null。

//取值
//第一种方式
localStorage.getItem('name');
//第二种方式
localStorage['name'];
//第三种方式 第三种键值格式与前两种有差别
localStorage.name;

删除指定键值对

• localStorage.removeItem(key)

用于删除指定键的键值对。例如：

//删除键值为name的键值对
localStorage.removeItem('name');

清空所有键值对

• localStorage.clear()

用于删除所有键值对。

通过索引获取键名

• localStorage.key(index)

用于获取指定索引位置的键名。索引从 0 开始。例如：

localStorage.key(0);
//获取索引为0的键名
//返回值为键名

获取所有值

• `localStorage.valueOf()

取出所有的值，返回一个对象。

localStorage.valueOf();
//返回值 例如；
/*
 *   {
 *   	name:'john',
 *	 	age:'22'
 *		...
 *		}

/

判断是否含有某个键（key）

• localStorage.hasOwnProperty(key)

判断是否含有某个键（key）,如果有返回true，没有则返回false

localStorage.hasOwnProperty('name');

拓展

遍历得到key

可以使用for循环、 for...in 循环或 Object.keys() 方法来遍历 LocalStorage 中的所有键值对。

//for
for(let i = 0;i<localStorage.length;i++){
    //打印键
    console.log(localStorage.key(i));
    //打印值
    console.log(localStorage.getItem(localStorage.key(i)));
}

//for in 

for(let key in localStorage) {
    if(localStorage.hasOwnPreperty(key)) {
        let value = localStorage.getItem(key);
        console.log(`${key}: ${value}`);
    }
}

//使用Object.keys() 方法遍历
let keys = Object.keys(localStorage);
for(let key of keys) {
    let value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

存储和读取复杂类型的数据

LocalStorage只能存储字符串类型的数据，但是可以存储JSON格式的数据，将复杂类型的数据通过JSON.stringify()转换为JSON字符串进行存储，读取时使用JSON.parse()还原。

在实际应用中，LocalStorage 可以用于存储一些用户偏好信息（如页面主题、字体大小）、表单数据（如自动保存用户未完成的表单输入）、缓存一些不经常更新的数据等，以提高用户体验和网站性能。但需要注意的是，由于存储的数据是明文的，不建议存储敏感信息，且存储容量有限，需要合理使用。

下面是一个存储和读取复杂对象的操作：

let user = {
    name:"Alice",
    age:20,
    hobbies:['reading','swimming'];
}
//存储对象，将对象转换为JSON字符串
localStorage.setItem('user',JSON.stringify(user));

//读取对象，将存储于的JSON字符串转换为对象

let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);
//输出: { name: 'Alice', age: 30, hobbies: ['reading','swimming'] }

应用场景

• 用户偏好设置：可以存储用户在网站上的个性化设置，如主题颜色、字体大小、语言偏好等。当用户下次访问网站时，直接从 LocalStorage 中读取这些设置，为用户提供一致的个性化体验。
• 缓存数据：对于一些不经常变化且需要频繁访问的数据，如网站的静态资源路径、一些基础配置信息等，可以将其存储在 LocalStorage 中。这样在页面加载时，可以直接从本地获取数据，减少服务器请求，提高页面加载速度。
• 离线应用：在一些离线应用中，LocalStorage 可以用于存储应用所需的数据。例如，离线阅读应用可以将用户下载的书籍内容存储在 LocalStorage 中，以便用户在没有网络的情况下也能阅读。
• 表单数据存储：当用户在填写表单时，如果因为某些原因需要暂停操作，下次打开页面时可以从 LocalStorage 中读取之前填写的数据并自动填充，避免用户重复输入。