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