清理localstorage_vue 界面刷新数据被清除 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只能存儲字符串,非字符串的數據在存儲之前會被轉換成字符串。在存儲一些復雜數據類型時可能有些麻煩,下面方法是先使用JSON.stringfy()方法將其轉換為字符串后存儲,讀取時使用JSON.parse()方法進行還原。
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 界面刷新數據被清除 localStorage的使用詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的清理localstorage_vue 界面刷新数据被清除 localStorage的使用详解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基本语法和数组(二维,多维,交错数组)
- 下一篇: Ubuntu18.04版本安装ssh及连