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就是一個鍵值對，值是數據轉換成的字符串。因此取之前要把字符串轉換成數據，取完之後轉換成字符串再存進去。