vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
更新時間：2018年09月16日 13:33:00 作者：xingxingxingge
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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)文章
5個可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實用程序函數(shù)。具有一定的參考價值，感興趣的可以了解一下2021-11-11
在項目開發(fā)中經(jīng)常遇到各種報錯,每次總是通過這樣或那樣的辦法解決掉,這篇文章主要給大家介紹了關(guān)于如何處理vue項目中錯誤的相關(guān)資料,需要的朋友可以參考下2022-06-06
我們用Vue3開發(fā)項目時,常常需要面對的一個問題就是組件之間的通信,如何將數(shù)據(jù)發(fā)給對應(yīng)的組件,這是不可避免的一個問題,該篇講述了Vue3常用的6種組件通信方式,需要的朋友可以參考下2024-09-09
vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuejs對象常用操作之取對應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等
最近在學(xué)Vue和javascript感覺js的好多方法都不太清楚,這里徹底總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vuejs對象常用操作之取對應(yīng)的值、取key和value值、轉(zhuǎn)數(shù)組及合并等的相關(guān)資料,需要的朋友可以參考下2024-01-01
Vue2+Elementui?Dialog實現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細(xì)介紹一下Vue2如何結(jié)合Elementui?Dialog實現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12
vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑功能
在使用 Vue.js 開發(fā)后臺管理系統(tǒng)時，經(jīng)常會遇到需要使用路由標(biāo)簽頁的場景，這篇文章主要介紹了vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑,需要的朋友可以參考下2023-05-05
我們在 vue 項目的目錄中經(jīng)?？吹?nbsp;env 開頭的文件,在文件內(nèi)聲明一些變量,這些變量就是一些配置變量,在不同環(huán)境下可使用的變量,本文我們將給大家介紹在vue開發(fā)中如何利用.env文件,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補(bǔ)充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下2019-11-11