前言

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

localStorage定义

localStorage是用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。在HTML5中新加入了localStorage的特性，它主要是用来作为本地存储，解决了cookie的缺陷问题，【关注尚硅谷，轻松学IT】用来替代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既有优点也有劣势，具体如下所示：

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