JS中localStorage的使用

其他 2024-03-04 09:03 94 0

前言

在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的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); }

2024年需要重点关注的15种计算机病毒

14张图巧妙地理解数据结构

博客评论

还没有人评论，赶紧抢个沙发~

发表评论