Skip to content

Storage 实际上就是让浏览器实现本地存储数据的功能,在 Storage 出现之前,我们用 cookie 进行存储,现在肯定都用 Storage 了。

在浏览器中,存储本质上也就是存一个字符串,当然,我们可以存储 JSON 格式的字符串,这样更方便我们结构化地取数据。

要实现本地化存储,我们需要使用 window.localStorage 对象和 window.sessionStorage 对象,这两者是有区别的,window.sessionStorage 数据的生存周期是网页打开到关闭,而 window.localStorage 则是直接存储在本地,只要你不清除是一直都在的。

我们要存储数据,无非就是增删改查,我们这里主要关注 window.localStorage,另一个其实都一样。

  • setItem():设置一个值,新增或修改
  • getItem():获取一个值
  • removeItem():删除一个值
  • clear():清空值

实际上用法非常简单:

js
window.localStorage.setItem("key", "value");//设置一个值
console.log(window.localStorage.getItem("key"));//获取到key
window.localStorage.removeItem("key");//删除key
window.localStorage.clear();//清除所有key

本地化存储是存储在用户电脑上,所以涉及到安全性的东西尽量不要存储在用户的电脑上。

在 localStorage 中,我们还可以使用 length 属性拿到存储了多少个数据,也可以使用 key(n) 可以拿到第 n 个 localStorage 的 key 值,这样配合使用就可以拿到所有的 localStorage。

以笔记为镜,可以知得失