H5 localstorage本地缓存数据的封装以及在vue中的使用

最新推荐文章于 2025-07-18 12:01:14 发布

刺心疯

最新推荐文章于 2025-07-18 12:01:14 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42363090/article/details/88981045

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个用于Vue项目的H5 LocalStorage封装方法，通过模块化封装简化了本地存储的操作流程，并展示了如何在实际Vue应用中利用此封装进行数据的增删改查。

H5 localstorage本地缓存数据的封装以及在vue中的使用

vue中常用的每次增加数据要缓存
每次删除数据也要缓存

//封装操作localstorage本地存储的方法     模块化的文件


//node.js   基础

var storage = {
	
	set(key,value){
		
		localStorage.setItem(key,JSON.stringify(value));
		
	},
	
	get(key){
		
		return JSON.parse(localStorage.getItem(key));
		
	},
	remove(key){
		localStorage.removeItem(key);
	}
}
//暴露给外部访问
export default storage;

然后某个页面需要本地存储，就需要用 import引入：import storage from ‘./storage.js’

App.vue页面：

<template>

<div id="app"> 

<input type="text" v-model='todo' @keydown="doAdd($event)" />

<hr>
<br>
<h2>进行中</h2>

<ul>

<li v-for="(item,key) in list" v-if="!item.checked"> //添加一个改变的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>

<br> 
<br>
<h2>已完成</h2>
<ul> 
<li v-for="(item,key) in list" v-if="item.checked">    //添加一个改变的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>
</div>
</template>

<script>

import storage from './storage.js';

// console.log(storage);

export default { 
data () { 
　　return {

　　　　todo:'' ,
　　　　list: []
　　}
},
methods:{
　　doAdd(e){
　　　　// console.log(e);
　　　　if(e.keyCode==13){
　　　　　　this.list.push({
　　　　　　　　title:this.todo,
　　　　　　　　checked:false
　　　　　　})
　　  　　}

　　storage.set('list',this.list);   //添加数据要缓存
　　},
　　removeData(key){
　　　　this.list.splice(key,1)

　　　　storage.set('list',this.list);  //删除数据要缓存
　　},
　　saveList(){                //change事件

　　　　storage.set('list',this.list);  //要缓存
　　}

},

//获取缓存数据

mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/  mounted 生命周期在载入之后就加载数据

　　var list=storage.get('list');

　　if(list){ /*注意判断*/ 建议先判断缓存的数据存不存在
　　　　this.list=list;

//或者：this.list=storage.get('list')
　　}
}

}
</script>

<style lang="scss">

.finish{

	    li{
	    background:#eee;
	    }
	    }

</style>