空夜

javascript使用localStorage存储浏览器端数据
有时候需要浏览器端来保存一些数据,比如用户信息。这个时候我们可以使用window.localStorage来保存这...
扫描右侧二维码阅读全文
16
2019/03

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

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

保存和获取方法

保存数据:

window.localStorage.setItem(key, value);

获取数据:

window.localStorage.getItem(key);

注意:这里的keyvalue都是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;
Last modification:March 16th, 2019 at 05:20 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 心语难诉

    身份认证还是需要Cookie加密与配合Session来使用。localStorage用来做临时数据(非敏感)来存储

    1. 空夜
      @心语难诉

      当然。只是用于存储要显示的用户数据,敏感数据如密码之类的是不会返回到浏览器端的

Leave a Comment