【html】localStorage设置和获取局部存储的值

背景

开发项目时，前端与后端的接口联调，在一个function()中接收到后端接口的值，经过一些处理后，需要将处理后的该值传到另一个function()中复用。

如何解决

第一个function()中设置局部存储：

javascript 复制代码

$(function () {
    // 一些其他处理 省略...
    localStorage.setItem("userName",root:$('#userName')).val());
});

第二个function()中获取局部存储的值：

javascript 复制代码

$(function () {
    // 一些其他处理 省略...
    var userName = localStorage.getItem("userName"); // 获取到的就是上面设置的 userName 值
    console.log(username); // 输出: root:JohnDoe
});

（同样适用于多个html之间的function()存储和获取数据）

介绍一下`localStorage`

localStorage 是 Web 存储 API 的一部分，允许开发者保存键值对数据在用户的浏览器中，即使关闭浏览器窗口后数据依然存在，除非用户手动清除浏览器缓存或数据。适用于：需要在多个页面或会话之间持久存储数据的应用程序。

如何使用`localStorage`

存储数据

使用 localStorage.setItem(key, value); 方法存储数据，其中 key 是存储项的名称， value 是要存储的数据。数据通常以字符串形式存储。

获取数据

使用 localStorage.getItem(key); 方法获取存储的数据，将返回与指定 key 相关联的值，如果该键不存在，则返回 null。

删除数据

使用 localStorage.removeItem(key); 方法删除指定 key 的数据项。

清除所有数据

使用 localStorage.clear(); 方法清除 localStorage 中的所有数据。

注意点

localStorage 只能存储字符串类型的数据。如果需要存储对象或者数组，需要先将其转换为 JSON 字符串。例如，使用 JSON.stringify() 来转换对象或数组为字符串，使用 JSON.parse() 来将字符串转换回对象或数组。

jQuery 复制代码

var user = { name: 'JohnDoe', age: 30 };
localStorage.setItem('user', JSON.stringify(user)); // 存储对象为字符串
var storedUser = JSON.parse(localStorage.getItem('user')); // 获取并转换回对象
console.log(storedUser.name); // 输出: JohnDoe

兼容性：虽然现代浏览器都支持 localStorage，但在某些旧版浏览器中可能不可用。可以通过检查 localStorage 在全局对象中的存在性来确保兼容性：if ('localStorage' in window)。如果不可用，可以考虑使用其他存储机制如 cookies 或 sessionStorage。

【html】localStorage设置和获取局部存储的值

背景

如何解决

介绍一下localStorage

如何使用localStorage

注意点

介绍一下`localStorage`

如何使用`localStorage`