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