• 九、【VUE-CLI】浏览器本地存储（待办事项案例 · 第二版）

    九、浏览器本地存储*

    1、webStorage

    1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

    2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制

    3. 相关API：

      1. xxxxxStorage.setItem('key', 'value');
        该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

      2. xxxxxStorage.getItem('person');

        ​ 该方法接受一个键名作为参数，返回键名对应的值

      3. xxxxxStorage.removeItem('key');

        ​ 该方法接受一个键名作为参数，并把该键名从存储中删除

      4. xxxxxStorage.clear()

        ​ 该方法会清空存储中的所有数据

    4. 备注：

      1. SessionStorage存储的内容会随着浏览器窗口关闭而消失
      2. LocalStorage存储的内容，需要手动清除才会消失
      3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
      4. JSON.parse(null)的结果依然是null

    2、CODE

    1、localStorage

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStoragetitle>
	head>
	<body>
		<h2>localStorageh2>
		<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    2、sessionStorage

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStoragetitle>
	head>
	<body>
		<h2>sessionStorageh2>
		<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(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    3、Result

    在这里插入图片描述

    4、待办事项案例 · 第二版

    只修改了 App.vue 实现了任务列表本地化存储（此处只粘贴变更追加的代码）

    data() {
	return{
		todoList: JSON.parse(localStorage.getItem('todos')) || []
	}
},
watch:{
	todoList:{
		deep: true,
		handler(newValue){
			localStorage.setItem('todos', JSON.stringify(newValue))
		}
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
  • 相关阅读:
    2311vim极语言加高亮
    玻色量子CEO文凯博士出席GTIC 2022全球AI芯片峰会，解读光量子计算新进展
    docker（七）SpringBoot集群搭建 Nginx负载
    [附源码]计算机毕业设计基于Springboot景区直通车服务系统
    TypeScript 类型学习
    【Leetcode】【每日一题】【中等】1465. 切割后面积最大的蛋糕
    自从用上这几款软件，才发现原来苹果电脑可以这么6！
    电机应用-控制系统、PID
    爬取网站时返回的html是乱码问题解决
    vue2 sass 安装及使用2
  • 原文地址：https://blog.csdn.net/qq_30769437/article/details/126168015