vue-vue2脚手架6-浏览器本地存储webStorage

最新推荐文章于 2024-05-17 08:46:17 发布

飘然渡沧海

最新推荐文章于 2024-05-17 08:46:17 发布

阅读量570

点赞数

分类专栏： # vue2脚手架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhougubei/article/details/121333881

版权

vue2脚手架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue-vue2脚手架6-浏览器本地存储

其实这边不借助vue就能实现本地存储功能， js有这种功能

1. 组件化编码流程：

	(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

	(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

			1).一个组件在用：放在组件自身即可。

			2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

	(3).实现交互：从绑定事件开始。
2. props适用于：

	(1).父组件 ==> 子组件 通信

	(2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

在这里插入图片描述

localStorage实例，sessionStorage 同理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

关于todolist的存储

 可以使用watch 监听方法来实现该功能

这里是要开启深度监听的，如果watch监听到事件改变了，vue是无法监听到地址值的改变，所以要开启 deep:true,

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader :addTodo="addTodo"/>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch: {
			todos:{
			    // 开启深度监听
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		},
	}
</script>

飘然渡沧海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-vue2脚手架6-浏览器本地存储webStorage

vue-vue2脚手架5-浏览器本地存储其实这边不借助vue就能实现本地存储功能， js有这种功能1. 组件化编码流程： (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 1).一个组件在用：放在组件自身即可。 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。 (
复制链接

扫一扫