JavaScript localStorage 本地存储：增删改查与对象处理详解

localStorage 基础操作指南

介绍

在前端开发中，若需进行数据存储或跨页面传值，localStorage 是一种高效且便捷的方式。它以键值对形式存储数据，取值与赋值操作直观简单。下文将详细阐述其具体用法及常见技巧。

存入数据共有三种方式。由于 localStorage 是 window 对象的属性，因此既可以使用方括号 [] 或点号 . 进行调用，也具备其自身的 setItem 方法。

// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

取值操作同样支持三种方式，其中获取数据的核心方法为 getItem。

// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

修改数据的本质是对对应的 key 重新赋值，这一操作会直接覆盖原有的值。

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

若要移除特定数据，既可以使用 delete 关键字删除对应属性，也可以调用 localStorage 自身的 removeItem 方法。

// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

获取存储中所有的 key（键名）。

// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
	console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
	console.log(key);
}

获取存储中所有的值。

localStorage.valueOf();//取出所有的值

清除 localStorage 中存储的所有数据。

localStorage.clear()

判断是否存在某个特定的 key，可通过 hasOwnProperty 方法实现。

localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false

localStorage 使用限制与技巧

使用技巧

• localStorage 受限于页面协议，若域名不同，则无法相互访问。
• 存在容量限制，通常约为 5MB，但不同浏览器的具体限制可能有所差异。
• 其生命周期理论上为永久，但数据实际存储在浏览器文件夹中，若用户卸载浏览器，数据可能会被清除。
• 浏览器允许用户设置是否允许访问数据，若设置为禁止，则访问将失败。
• 兼容 IE8 及以上的浏览器版本。
• 仅支持存储字符串类型数据，因此非字符串类型需转换为字符串后再存储。

对象存储与 JSON 处理详解

需要注意的是：

1、浏览器限制 localStorage 的值类型必须为 string。若存储的数据非 string 类型，localStorage 会自动执行类型转换。

2、当存储 JSON 对象数据时，必须使用 JSON.stringify() 方法将其转换为 JSON 字符串；读取时，则需使用 JSON.parse() 将 JSON 字符串还原为对象。

例如：

假设需要向 localStorage 中存储一个名为 person 的对象：

let person = {
    name: 'Ryan Xu',
    age: 18;
}

若不使用 JSON.stringify() 进行处理：

window.localStorage.setItem('person1', person);
console.log(window.localStorage);

对于对象类型数据，若未加处理直接存入 localStorage，系统会自动进行类型转换，导致对象变为 [object Object]，这并非我们期望的结果。

若使用 JSON.stringify() 进行处理：

window.localStorage.setItem('person1', JSON.stringify(person));
console.log(window.localStorage);

通过上述对比可知，对于对象类型数据，存入 localStorage 时应使用 JSON.stringify() 将其转换为 JSON 字符串；同理，读取时应使用 JSON.parse() 将结果还原。

总结

至此，关于 JavaScript 中 localStorage 本地存储（新增、删除、修改）的使用教程已介绍完毕。如需了解更多 js localStorage 本地存储相关内容，欢迎搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！