Vue本地储存

本地储存

存储内容大小一般支持5MB 左右(不同浏览器可能还不一样)
浏览器端通过 Window.sessionStorage 和 Window.localstorage属性来实现本地存储机制

相关API

xxxStorage.setItem('key‘，‘value’) 该方法接受一个键和值作为参数，会把键值对添加到存储中
如果键名存在，则更新其对应的值
xxxStorage·getItem(‘key’) 该方法接受一个键名作为参数，返回键名对应的值
xxxStorage.removeItem(‘key’) 该方法接受一个键名作为参数，并把该键名从存储中删除
xxxStorageclear() 该方法会清空存储中的所有数据

备注

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

localStorage

<h2>localstorage</h2>
<button onclick="saveDate()">点我保存数据</button><br/>
<button onclick="readDate()">点我读数据</button><br/>
<button onclick="deleteDate()">点我删除数据</button><br/>
<button onclick="deleteAllDate()">点我清空数据</button><br/>
<script>
	let person = (name:"j0]o",age:20)
	function saveDate() {
		localstorage.setItem( 'msg', localstorage')
		localstorage.setItem( 'person',JsON.stringify(person))
	}
	function readDate() {
		console.log(localstorage.getItem( 'msg'))
		const person = localstorage.getItem('person')
		console.log(JsON.parse(person))
	}
	function deleteDate() {
		localstorage .removeItem( 'msg')
		localstorage.removeItem('person')
	}
	function deleteAllDate() {
		localstorage.clear()
	}
</script>