本地存储实现 - localStorage属性

Maxuan
585 阅读2分钟

摘自菜鸟教程

定义

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据

  • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，是只读的

  • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

实例：使用 localStorage 创建一个本地存储的 name/value 对，name="lastname" value="Smith", 然后检索 "lastname" 的值，并插入到 id="result" 的元素上:

// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

保存数据语法：

localStorage.setItem("key", "value");

读取数据语法：

localStorage.getItem("key");

删除单条数据语法：

localStorage.removeItem("key");

清除全部数据语法：

localStorage.clear();

localStorage 的优势

  1. localStorage 拓展了 cookie 的 4K 限制。

  2. localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

  1. 浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。

  2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。

  3. localStorage在浏览器的隐私模式下面是不可读取的。

  4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

  5. localStorage不能被爬虫抓取到。

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

JSON.stringify() & JSON.parse()

JSON 通常用于与服务端交换数据，在向服务器发送数据时一般是字符串，可以使用 JSON.stringify() 方法将 js 对象转换为字符串，同理，接收数据的时候用 JSON.parse()将字符串转换为js对象

由于localStorage方法存储的值类型限定为string，而js提供的是个对象，这就需要对值进行转换后存储和读取

  • localStorage.setItem("cart", JSON.stringify(newV)) ：将js对象转换为字符串存储到本地

  • JSON.parse(localStorage.getItem("cart")) ：获取本地数据字符串cart，转换成js对象

实例：

data() {
    return {
        //直接从data获取
        cart: JSON.parse(localStorage.getItem("cart"))
}
},
watch: {
    //接收watch传入的值并存储到本地
    setLocalData(newV) {
        localStorage.setItem("cart", JSON.stringify(newV));
    },
}
avatar
文章
阅读
粉丝