LocalStorage

初识

localStoragesessionStorage都是用于数据的存储。

前者将数据存放在本地,只要不clear(除了一些其他特殊情况),数据就会一直存在。

后者是将数据存放在浏览器中,浏览器一旦关闭,数据将不会存在。

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keydown.enter="addValueHandler" v-model="addValue">

    <ul>
        <li v-for="item of items">{{item}}</li>
    </ul>
</div>
</body>
</html>
<script>
    "use strict";

    const LOCAL_ITEM = 'todo-items';
    new Vue({
        el: '#app',
        data: {
            items: getItem(),
            addValue: ''
        },
        methods: {
            addValueHandler () {
                this.items.push(this.addValue);// 改变数组触发watch
                this.addValue = '';
            }
        },
        watch: {
            items: {
                handler:function (val) {
                    setItem(val);
                },
                deep: true
            }
        }
    })

    // 存
    function setItem(item) {
        window.localStorage.setItem(LOCAL_ITEM, JSON.stringify(item));
    }

    // 取
    function getItem() {
        return JSON.parse(window.localStorage.getItem(LOCAL_ITEM) || '[]');
    }
</script>

打开页面后执行相关操作,再按F12查看本地存储就能看到你刚才所存的数据。

localStorage

API

在浏览器的控制台输入localStorage查看此对象的详细信息:

localStorage

方法作用
setItem(key, value)存数据
getItem(key)取数据
clear()清除数据
removeItem(key)清除指定key
hasOwnProperty(key)判断是否存储了该key(非原链),返回布尔值
propertyIsEnumerable(key)用来检测属性是否属于某个对象的(检测属性是否可用 `for...in 枚举)
key(index)获取指定索引位置的key名称,从0开始
length获取所有存储的key的个数
toLocaleString(将(数组)转为本地字符串
valueOf()获取所有存储的数据

示例:

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
注意
  • 在存储的时候,用JSON.stringify(value)把值转换为字符串进行存储,取出的时候再用JSON.parse(value)转成JavaScript对象进行操作。
  • localStorage一般只能存5m的数据
  • 老的浏览器不支持HTML5
  • 有些浏览器如果使用无痕浏览模式会禁用localStoragesetItem方法。
  • 应该把localStorage作为一个不可靠的缓存使用,优化性能(如:缓存ajax请求),而不是作为数据库使用。
  • localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
  • PC端不适用
  • 存储的数据对F12来说是透明的,安全性低

还有很多一些鸡肋的地方,可以点我。但是相对于移动端来说,localStorage可以节省流量,并且可以离线访问已经缓存过的页面。

Last modification:February 23rd, 2018 at 02:15 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment