vue 界面刷新数据被清除 localStorage的使用详解
更新时间：2018年09月16日 13:33:00 作者：xingxingxingge
今天小编就为大家分享一篇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的使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
VueUse为Vue开发人员提供了大量适用于Vue2和Vue3的基本Composition API 实用程序函数。具有一定的参考价值，感兴趣的可以了解一下2021-11-11
在项目开发中经常遇到各种报错,每次总是通过这样或那样的办法解决掉,这篇文章主要给大家介绍了关于如何处理vue项目中错误的相关资料,需要的朋友可以参考下2022-06-06
我们用Vue3开发项目时,常常需要面对的一个问题就是组件之间的通信,如何将数据发给对应的组件,这是不可避免的一个问题,该篇讲述了Vue3常用的6种组件通信方式,需要的朋友可以参考下2024-09-09
vue @click与@click.native,及vue事件机制的使用分析
这篇文章主要介绍了vue @click与@click.native,及vue事件机制的使用分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等
最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下2024-01-01
Vue2+Elementui Dialog实现封装自定义弹窗组件
在日常的管理系统界面中,我们写的最多的除了列表表格之外,就是各种弹窗组件,本文就来为大家详细介绍一下Vue2如何结合Elementui Dialog实现封装自定义弹窗组件,希望对大家有所帮助2023-12-12
在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景，这篇文章主要介绍了vue3+Typescript实现路由标签页和面包屑,需要的朋友可以参考下2023-05-05
我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量,本文我们将给大家介绍在vue开发中如何利用.env文件,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue中注册自定义的全局js方法,文中给大家补充介绍了vue自定义函数挂到全局的方法，需要的朋友可以参考下2019-11-11
最新评论