前端开发之 JS 中 localStorage 的使用

2022 年 1 月 07 日
本文字数：2431 字
阅读完需：约 8 分钟

前言

在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，前端培训而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的 cookie，但是 cookie 的缺点：读写困难、容量有限的问题也是很明显的，localStorage 的功能主要就是用来替代 cookie 的，那么本文就来分享一下好用的本地存储方法：localStorage 的使用。

localStorage 定义

localStorage 是用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。在 HTML5 中新加入了 localStorage 的特性，它主要是用来作为本地存储，解决了 cookie 的缺陷问题，用来替代 cookie，localStorage 中一般浏览器支持的是 5M 大小，但是在不同的浏览器下 localStorage 的支持大小可能会有所不同。

localStorage 方法

localStorage 主要由三个方法组成，简单来讲就是存、取、删三种操作对应的使用方法，具体如下所示：

1、存

localStorage.setItem(key, value)：将 value 存储到 key 字段，如果 key 存在时，就更新 value。

2、取

localStorage.getItem(key)：获取指定 key 本地存储的值，如果 key 不存在就返回 null。

3、删

删除对应了两种删除方式，一种是根据对应的 key 定向删除，一种是直接全部删除。

①根据 key 指定删除

localStorage.removeItem(key)：删除指定 key 本地存储的值，一经删除，key 对应的数据将全部删除掉。

②全部删除

localStorage.clear()：该操作适合删除多个缓存数据，但是一旦执行就会清除所有的本地缓存数据。

4、其他方法

①遍历存储的 key

localStorage.length：数据的总数。eg：localStorage.length

②获取 key

localStorage.key(index)：获取对应的 key。eg：let key = localStorage.key(index);

③存储 JSON 格式的数据

JSON.stringify(data) 将一个对象转换成 JSON 格式的字符串，返回转换后的字符串；

JSON.parse(data) 将数据解析成对象，返回解析后的对象。

但是考虑到 localStorage 存储的数据不能跨浏览器共享，所以只能读取当前浏览器的数据，而且存储空间为 5M。

localStorage 特点

localStorage 既有优点也有劣势，具体如下所示：

localStorage 拓展并且替代了 cookie 的功能，localStorage 是一个普通对象，任何对象的操作都适用；
localStorage 可以将第一次请求的数据直接存储到本地，而且浏览器支持的是 5M 大小；
浏览器只有在 IE8 以上的 IE 版本才支持 localStorage；
localStorage 的值类型目前仅限定为 string 类型，如果想要使用常用的 JSON 对象类型，则需要作转换；
localStorage 在浏览器的隐私模式下是不能读取的；
爬虫爬取不到 localStorage；
localStorage 属于永久性存储；
localStorage 要通过域名访问的方式才能起作用，如果调用 clear()方法，那么 key、oldValue 和 newValue 都会被设置为 null；
localStorage 使用方式一致，localStorage 没有时间限制的数据存储。

localStorage 使用

下面就来分享一下 localStorage 的使用示例，方便理解使用。

1、在使用 localStorage 的时候，首先要确定是否能用 localStorage，所以要判断一下浏览器是否支持 localStorage，如下所示：

   if(!window.localStorage){        alert("浏览器不支持localstorage！");        return false;    }else{        //业务需求    }

复制代码

2、JavaScript 操作 localStorage 的常规使用方法

①设置 localStorage

  Storage.set = function(name, val) {    localStorage.setItem(name, val);  }

复制代码

②获取 localStorage

  Storage.get = function(name) {    return localStorage.getItem(name);  }

复制代码

③调用函数

  Storage.set("tip", “yes”);  Storage.set(“site”, "...");  console.log(Storage.get("tip")); //输出结果：yes

复制代码

④完整示例

<html>  <head>    <title>本地存储</title>  </head>  <body>    <script>      const Storage = {};      Storage.get = function(name) {        return localStorage.getItem(name);      }      Storage.set = function(name, val) {        localStorage.setItem(name, val);      }      Storage.set("tip", “yes”);      Storage.set(“site”, "...");      console.log(Storage.get("tip")); //输出结果：yes</script>  </body></html>

复制代码

3、获取 localStorage 的键值对示例

  for(var i=0;i<localStorage.length;i++){    console.log( localStorage.getItem(localStorage.key(i)));  //打印出来localStorage存储的结果  }

复制代码

4、localStorage 的删除示例

①对 localStorage 的所有内容清除

  var storage=window.localStorage;        storage.clear();        console.log(storage);

复制代码

② 对 localStorage 中的某个键值对删除

  var storage=window.localStorage;            storage.a=1;            storage.setItem(“b”,111);            storage.removeItem("a");            console.log(storage.a);

复制代码

5、localStorage 存储 JSON 对象的使用

通过 localStorage 存储 JSON 对象的使用方法，首先需要先把需要存储的 JSON 对象转换成 string 字符串，然后通过 localStorage 存储，最后在需要使用 JSON 对象的地方把 localStorage 存储的字符串解构成 JSON 对象即可，具体的操作步骤如下所示：

①把 JSON 对象转换成字符串，然后用 localStorage 存储

  localStorage.setItem(“dataKey", JSON.stringify(this.data));   //this.data就是JSON对象

复制代码

②在使用的地方，把存取的字符串转换成 JSON 对象

  方法一: JSON.parse(localStorage.getItem("dataKey”);  方法二: val("("+localStorage.getItem("dataKey”)+”)”);

复制代码

6、localStorage 的键获取示例

  //使用key()方法，向其中插入索引即可获取对应的键  var storage=window.localStorage;            storage.a=1;            storage.setItem(“b”,111);            for(var i=0;i<storage.length;i++){                var key=storage.key(i);                console.log(key);            }

复制代码

原创作者：三掌柜 666

发布于: 刚刚阅读数: 2

飞不起来的童年

关注

关注尚硅谷，轻松学IT 2021.11.23 加入

还未添加个人简介

发布

暂无评论

创作场景

前端开发之 JS 中 localStorage 的使用

​前言

localStorage 定义

localStorage 方法

localStorage 特点

localStorage 使用

飞不起来的童年

评论

前言