6-本地储存.md

目标

• 能够写出sessionStorage数据的储存以及获取
• 能够写出localStorage数据的储存和获取
• 能够说出这两者的区别

1. 本地储存

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地储存大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

1. 数据存储在用户的浏览器中
2. 设置、读取十分方便，甚至页面刷新不丢失数据
3. 容量较大，sessionStorage约5M，localStorage约20M。
4. 只能存储字符串，可以将对象JSON.stringify()编码后储存

2. window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口（页面）下数据可以共享
3. 以键值对的形式储存使用

常用方法

方法	作用
sessionStorage.setItem(key, value)	储存数据
sessionStorage.getItem(key)	获取数据
sessionStorage.removeItem(key)	删除数据
sessionStorage.clear()	清空所有

3. window.localStorage

1. 生命周期永久有效，除非手动删除，否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器）
3. 以键值对的方式储存使用

常用方法

方法	作用
localStorage.setItem(key, value)	储存数据
localStorage.getItem(key)	获取数据
localStorage.removeItem(key)	删除数据
localStorage.clear()	清空所有