Vue —— 进阶脚手架（三）（本地存储）

Vue全家桶 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶（零）	初始化脚手架
Vue2.x - 进阶（一）	refs属性、props配置项
Vue2.x - 进阶（二）	混入 mixin、插件 plugins、样式 scoped
Vue2.x - 进阶（三）	本地存储
Vue2.x - 进阶（四）	组件的自定义事件
Vue2.x - 进阶（五）	全局事件总线、消息订阅与发布
Vue2.x - 进阶（六）	过渡与动画
Vue2.x - 进阶（七）	解决开发环境 Ajax 跨域问题
Vue2.x - 进阶（八）	默认插槽、具名插槽和作用域插槽
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

webStorage

1. 组成部分

webStorage 实际上由两部分组成：sessionStorage 与 localStorage。

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

2. 相关 API

	xxxStorage.setItem('key', 'value')

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

	xxxStorage.getItem('person')

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

	xxxStorage.removeItem('key')

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

	xxxStorage.clear()

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

一、LocalStorage

1. 功能

localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2. 实例 （熟悉 API 的使用）

	<button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空全部数据</button>

	let p = {name:'张三',age:"20"}
	
    function saveData(){
        localStorage.setItem('msg','hello')
        localStorage.setItem('person', JSON.stringify(p))
    }
    
    function readData(){
        console.log(localStorage.getItem('msg'))

        const result = localStorage.getItem('person')
        console.log(JSON.parse(result)) 
    }
    
    function deleteData(){
        localStorage.removeItem('msg')
    }
    
    function deleteAllData(){
        localStorage.clear()
    }

点击保存一个数据 （键为 msg 和 person 的键值数据）

点击读取一个数据 （输出键为 msg 和 person 的值）

点击删除一个数据 （键为 msg 的键值数据）

点击清空全部数据

二、sessionStorage

1. 功能

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

2. 实例（熟悉 API 的使用）

和 localStorage 相似，仅仅把 localStorage 替换成 sessionStorage 即可

三、总结及注意事项

1. 存储的数据何时消失 ？

1. LocalStorage 存储的内容需要手动清除才会消失。
2. SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

2. getItem 获取不到的返回值：null

xxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，那么getItem 的返回值是 null。

JSON.parse(null) 的结果依然是 null。

不积跬步无以至千里 不积小流无以成江海