JavaScript使用localStorage存储浏览器端数据

最新推荐文章于 2024-05-07 14:21:25 发布

eknown

最新推荐文章于 2024-05-07 14:21:25 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js localstorage

本文链接：https://blog.csdn.net/qq_28379809/article/details/88598587

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用JavaScript的localStorage在浏览器端保存和获取数据。详细讲解了保存单个值和保存对象数据的方法，并提供了具体的示例代码，包括保存用户名和用户对象的操作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候需要浏览器端来保存一些数据，比如用户信息。这个时候我们可以使用window.localStorage来保存这些值。

保存和获取方法

保存数据：

window.localStorage.setItem(key, value);

获取数据：

window.localStorage.getItem(key);

注意：这里的key和value都是String，具体可以参考源码：

setItem(key: string, value: string): void;

示例1——使用`localStorage`保存单个值

以保存用户名为例：

// 保存name值
window.localStorage.setItem("name", "eknows");

// 获取name值
var name = window.localStorage.getItem("name");

示例2——使用`localStorage`保存对象数据

保存对象数据与保存单个值不同，从源码可以看出，setItem和getItem方法的都是针对String的，所以存入对象数据时需要先用JSON.stringify(obj)将其转换成String，获取到对象的String值后需要使用JSON.parse(str)转换为Object.

以保存用户数据为例：

保存用户数据

window.localStorage.setItem("user", JSON.stringify(user)); // 先转换成String

获取用户数据

let userStr = window.localStorage.getItem("user"); // 获取用户数据，此时是一个字符串
let user = JSON.parse(userStr); // 将字符串转换成对象，这样才能获取到里面的属性

// 从user中获取name和password
let name = user.name;
let password = user.password;