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

雨点打透心脏的1/2处 2022-03-07 07:54 475阅读 0赞

有时候需要浏览器端来保存一些数据，比如用户信息。这个时候我们可以使用`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.

以保存用户数据为例：

1.  保存用户数据

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

1.  获取用户数据

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

发表评论取消回复

表情：

评论列表（有 0 条评论，475人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript使用localStorage存储数据

背景以前js都是 `Session` 和 `Cookie` 来存储信息，仿佛我还停留在那个时候，一问同事有没有新的solution，才知道现在已经有 `HTML5 ...

- 日理万妓/ 2024年04月19日 12:17/ 0 赞/ 92 阅读

相关 Vue----webStorage浏览器本地存储、localStorage、sessionStorage

目录总结一、localStorage保存数据二、sessionStorage -------------------- 总结 1. 存储内容大小一般支持

快来打我*/ 2024年04月05日 05:24/ 0 赞/ 89 阅读

相关 JavaScript中localStorage使用方法

1.存值 localStorage.setItem("key","data"); 2.取值 localStorage.getItem("key")

痛定思痛。/ 2022年11月13日 14:29/ 0 赞/ 218 阅读

相关 Web存储—localStorage存储

Web存储—localStorage存储一、 localStorage存储特点：特点：本地存储数据的不需要网络、大小5M 、域内安全、永久存储、只要不删除，就一

布满荆棘的人生/ 2022年09月07日 05:49/ 0 赞/ 216 阅读

相关 jquery localStorage存储json数据

jquery存储内容的时候,存的是字符串,如果直接存储对象,那么在获取的时候,只能获取到object. 因此在存储之前需要把json数据转换成字符串进行存储,在取数据的时候

末蓝、/ 2022年08月28日 03:59/ 0 赞/ 581 阅读

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

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

雨点打透心脏的1/2处/ 2022年03月07日 07:54/ 0 赞/ 476 阅读

相关使用 localstorage 写入浏览器并获取

写入：以字符串的形式写入 localStorage.setItem('data', JSON.stringify(arr)); ![1470521-20

柔光的暖阳◎/ 2022年01月06日 22:29/ 0 赞/ 267 阅读

相关 localStorage怎样存取数据怎样清除localStorage存储的数据

localStorage很多时候用来存储数据非常好，方便在页面中使用某些数据的时候调用首先，通过setItem(key,value)即可存储数据然后用g

我会带着你远行/ 2021年11月10日 16:34/ 0 赞/ 1392 阅读

相关 H5-localStorage数据存储总结

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了co

骑猪看日落/ 2021年09月14日 05:18/ 0 赞/ 482 阅读

相关 localStorage.getItem 往浏览器里面储存数据到本地localStorage

借鉴https://blog.csdn.net/aaa333qwe/article/details/79025336 往浏览器里面储存数据 localStorage.se

╰半橙微兮°/ 2021年09月01日 10:02/ 0 赞/ 533 阅读