vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
更新時間：2018年09月16日 13:33:00 作者：xingxingxingge
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
localStorage是html5新增的一個本地存儲API,它有5M的大小空間,通過(key,value)的方式存儲在瀏覽器中
window.localStorage.setItem('key', value); //儲存文件
window.localStorage.getItem('key'); //讀取文件
window.localStorage.removeItem('key'); //清除文件
vue中使用方法：
1、新建一個store.js文件
localStorage只能存儲字符串，非字符串的數(shù)據(jù)在存儲之前會被轉(zhuǎn)換成字符串。在存儲一些復(fù)雜數(shù)據(jù)類型時可能有些麻煩,下面方法是先使用JSON.stringfy()方法將其轉(zhuǎn)換為字符串后存儲,讀取時使用JSON.parse()方法進(jìn)行還原。
const IDLIST_KEY = 'idlist'; //定義常量保存鍵值
export default {
saveIDlist(data){
window.localStorage.setItem(IDLIST_KEY,JSON.stringify(data));
},
fetchIDlist(){
return JSON.parse(window.localStorage.getItem(IDLIST_KEY)|| '[]');
}
}
2、引入js文件：
3、使用：
store.saveIDlist(selectIDlist); //保存 selectIDlist = store.fetchIDlist(); //讀取
以上這篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例
本文主要介紹了Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue腳手架的簡單使用實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)按鈕功能，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級聯(lián)動示例
本篇文章主要介紹了vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級聯(lián)動示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳）
這篇文章主要介紹了詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式
這篇文章主要介紹了vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08