千家信息网

vue中如何使用localStorage实现在界面刷新时清除数据

发表于:2024-10-17 作者:千家信息网编辑
千家信息网最后更新 2024年10月17日,本文小编为大家详细介绍"vue中如何使用localStorage实现在界面刷新时清除数据",内容详细,步骤清晰,细节处理妥当,希望这篇"vue中如何使用localStorage实现在界面刷新时清除数据
千家信息网最后更新 2024年10月17日vue中如何使用localStorage实现在界面刷新时清除数据

本文小编为大家详细介绍"vue中如何使用localStorage实现在界面刷新时清除数据",内容详细,步骤清晰,细节处理妥当,希望这篇"vue中如何使用localStorage实现在界面刷新时清除数据"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

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实现在界面刷新时清除数据"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。

0