vue中localstorage的运用

首先情景是：线上商城用户想增加地址。使用了vant的增加地址的组件。用户点击保存触发onSave，首先把需要的存入的数据也就是用户的姓名地址存到一个对象里。

        onSave(content) {
             let addDate={
                'username':content.name,
                'usertel':content.tel,
                'province':content.province,
                'city':content.city,
                'county':content.county,
                'addressDetail':content.addressDetail,
                'addressInfo':content.province + content.city + content.county + content.addressDetail,
                'postalCode':content.postalCode
            };
            this.default =content.isDefault;
            this.addDate = addDate;
            //加入localstorage
            this. finalItemDetail();
     }

每次存入前都要先读取原有的localstorage，因localstorage是对字符串的存取，所以读取的时候要先经过JSON.parse变回原来的形式【lsit】，保存则需要JSON.stringify()转化成字符串。
这里的address就是读取的key，而存入的值相当于value。
而存入的value就是我们setItem的对象【list】。
因此只要对list修改就实现了对localstroge修改。

        finalItemDetail() {
            //从localStorage中获取所用的评论
            let list = JSON.parse(localStorage.getItem("address") || '[]')
            if (this.default)
                list.unshift(this.addDate);
            else if (this.addDate != {})
                list.push(this.addDate);
            //重新保存最新的地址
            localStorage.setItem('address',JSON.stringify(list))
        },

我们可以在谷歌的调试模式下找到存入的信息：

由此可知，如果是想改变localstroge，也是先把本来的localstroge读出来，然后修改读出来的list，最后再存回去。
如果想删除全部数据，则是localStorage.removeItem('accessToken')删除这个key。
总而言之就是：
先取出本来的数据（如果为空的话也不会报错）：
let list = JSON.parse(localStorage.getItem("address") || '[]')
操作完成之后再存回去：
localStorage.setItem('address',JSON.stringify(list))
一个localstroge就是一个键值对，值是数据转换成的字符串。因此取之前要把字符串转换成数据，取完之后转换成字符串再存进去。