园龄：3年4个月粉丝：12 关注：2

Web 本地存储和Vue本地存储实例

Web 本地存储

Web Storage API

关键对象

window.sessionStorage对象用于区域存储；
window.localStorage对象用于本地存储。

特点

数据的设置和读取比较方便。
容量较大，sessionStorage大约为5MB，localStorage大约为20MB。
只能存储字符串，若想要存储JSON对象，则可以使用window.JSON.stringify()或者parse()进行序列化和反序列化编码

区别

sessionStorage的存储周期只有一次会话（关闭浏览器就会消失）

localStorage的存储周期是永久的（关闭浏览器数据还在），除非用户手动清除浏览器缓存文件

属性和方法

window.localStorage.setItem('键','值')

window.sessionStorage.setItem('键','值')

方法/属性	描述
key(n)	该方法用于返回存储对象中第n个key的名称
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值
removeItem(key)	该方法删除键名为key的存储内容
clear()	该方法清空所有存储内容
length	该属性返回Storage存储对象中包含的item的数量

localStorage简单数据存储实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username">
    <button id="setData">设置数据</button>
    <button id="getData">获取数据</button>
    <button id="delData">删除数据</button>

    <script>
        var username = document.querySelector('#username');
        // 单击“设置数据”按钮，设置数据
        document.querySelector('#setData').onclick = function () {
            var val = username.value; // 获取username里面的值
            //window.sessionStorage.setItem('username', val);//一个会话，关闭网页后，数据不会保存
            window.localStorage.setItem('username',val)//只要不主动清除，一直都在
        };
        // 单击“获取数据”按钮，获取数据
        document.querySelector('#getData').onclick = function () {
            // alert(window.sessionStorage.getItem('username'));
            alert(window.localStorage.getItem('username'))
        };
        // 单击“删除数据”按钮，删除数据
        document.querySelector('#delData').onclick = function () {
            // window.sessionStorage.removeItem('username');
            window.localStorage.removeItem('username')
        };

        if (window.sessionStorage) {
            // 浏览器支持sessionStorage
        } else if (window.localStorage) {
            // 浏览器支持localStorage
        }
    </script>

    </script>
</body>
</html>

localStorage在Vue中的实例（标签记录器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
        integrity="sha384-t1tHLsbM7bYMJCXlhr0//00jSs7ZhsAhxgm191xFsyzvieTMCbUWKMhFg9I6ci8q"
        crossorigin="anonymous"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .divcenter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 50%;
        }
        p {
            border: solid 1px;
            margin: 0px;
            padding: 0px;
        }
        .spanX {
            float: right;
            margin-right: 10px;
            width: 10px;

        }
        span {
            cursor: pointer;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app" class="divcenter">
        <h2>标签记录器</h2>
        <!--文本框，设置双向绑定和回车事件-->
        <div>
            <input type="text" placeholder="请输入相应信息后按回车键！" v-model="text" @keyup.Enter="info"
                style="width: 100%;height: 40px;">
        </div>    
        <div>
               <!--回车后添加的标签和删除按钮-->
            <p v-for="(list,index) in arr">
                <span style="background-color: blanchedalmond;"> {{index+1}} </span>
                {{list}}
                <span class="spanX" @click="del(index)">x</span>
            </p>   
               <!--显示总数和清空按钮-->
            <div style="border: solid 1px;" v-show="arr.length!=0">
                <span>总数：{{arr.length}}</span>
                <span style="float: right;" @click="delAll">Clear</span>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //记录数据的数组，将保存到localStorage的字符串数据转换为对象数据重新保存到数组中
                arr: JSON.parse(window.localStorage.getItem('UserData')||'[]'),
                text: "",
            },
            methods: {
                //回车触发事件，把文本框里的内容保存到数组arr中
                info: function () {
                    //在末尾添加一条数据
                    this.arr.push(this.text);
                    this.text = "";
                },
                //单击删除按钮触发事件，清除指定下标数组的值
                del: function (index) {
                    //根据下标删除1条数据
                    this.arr.splice(index, 1);
                },
                //单击清空按钮，清除数组arr里所有是值
                delAll: function () {
                    this.arr = [];
                }
            },
       
            //监听事件
            watch:{
                //数据在标签内部改变是否触发：true
                deep:true,
                //要记录数据的数组，（名字要好保存数据的数组名一致），当arr数据发送改变时触发，新的数据返回到newVale中
                arr(newVale){
                    //将新的对象数据转换为字符串数据赋值给变量
                    let json_data=JSON.stringify(newVale)
                    //将字符串数据按照键值对的方式保存到localStorage中
                    window.localStorage.setItem('UserData',json_data)
                }        
            }
        })  
    </script>
</body>
</html>

上一篇Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器

下一篇移动端页面布局中的流动布局（百分比布局）和弹性布局