共计 4255 个字符，预计需要花费 11 分钟才能阅读完成。
1.1 Web Storage 的概念
Web Storage 可以将数据存储在本地，类似于 Cookie（存储空间的大小只有 4KB 左右），但相比 Cookie 可以 减少网络流量 ， 因为 Web Storage 存储的数据不会发送给服务器，减少数据在浏览器和服务器间不必要地来回传递。
Web Storage 具有以下五个特点：
1、数据的设置和读取比较方便
2、容量较大，可以存储大约 5MB 数据
3、只能存储字符串，如果要存储 JOSN 对象，则可以使用 JOSN.stringify()和 JOSN.parse（）方法分别进行序列化和反序列化
4、本地数据可以即时获得
5、数据可以临时存储
1.2 localStorage
localStorage 的主要作用是 本地存储 ，它可以将数据按照 键值对 的方式保存在浏览器中，除非用户或脚本主动清除数据，否则该数据会一直存在（持久化保存）。
localStorage 的优势在于拓宽了 Cookie 的 4KB 限制，并且可以 将第一次请求的数据直接存储到本地，其容量相当于一个 5MB 大小的数据库。
localStorage 在使用中也有一些局限：
1、IE 浏览器在 8 以上的版本才支持
2、不同浏览器保存的数据量大小不统一
3、目前所有的浏览器都会把 localStorage 的值类型限定为 String 类型，对于比较常用的 JavaScript 对象类型需要转换成字符串保存
4、localStorage 在浏览器的隐私模式下是不可读取的
5、localStorage 不能被网络爬虫抓取到
1.3 sessionStorage
sessionStorage 的主要作用是 区域存储，当浏览器标签页关闭后，其中存储的数据会被自动清除。如果打开了不同的标签页，即使是同一页面，sessionStorage 对象也是不同的。所以想要不同标签页下的网页不能相互访问数据，可以将数据保存到 sessionStorage 中。
1.4 localStorage 和 sessionStorage 的区别
这两者的区别在于数据的生命周期不同。localStorage 为 永久保存 ，而 sessionStorage 为 临时保存。
即 localStorage 没有过期时间，只要不 clear 或 remove，数据会一直保存。
sessionStorage 针对一个 session 进行数据存储，生命周期与 session 相同，当用户关闭浏览器后，数据将被删除。
| 方法 / 属性 | 描述 |
| key(n) | 该方法用于返回 localStorage 对象中第 n 个 key 的名称 |
| setItem(key,value) | 该方法接受键名和值作为参数，将会把键值对存储到 localStorage 中，如果键名存在，则更新其对应的值 |
| getItem(key) | 该方法接受一个键名作为参数，返回键名对应的值 |
| removeItem(key) | 该方法删除键名为 key 的存储内容 |
| clear() | 该方法清空所有存储内容 |
| length | 该属性返回 localStorage 对象中包含的 item 的数量 |
querySelector 选择器可以通过 document 和 element 来调用他们（括号内单引号双引号均可）
用来代替 getElementById
var body=document.querySelector("body");// 取到 body
body.appendChild(document.createTextNode("ffff"));
var div=document.querySelector("#div1");// 取到 id 为 div1 的第一个元素
var div=document.querySelector(".div1");// 取到类为 div1 的第一个元素
var img=document.querySelector("img.button");// 取到类为 button 的第一个图像元素querySelectorAll 和上面的一样，返回的不仅仅是一个元素，有点像 nodelist
var em=document.getElementById("div1").querySelectorAll("em");// 取得 div 中所有的 em 元素
var div=document.querySelectorAll(".div")// 取得所有的 div 元素
var strong=document.querySelectorAll("p strong");// 取得 p 元素里面所有的 strong 元素https://www.cnblogs.com/HavenLau/p/10476508.html
1.5 Web Storage 事件监听
当使用 Web Storage 存储的数据发生变化时，会触发 Window 对象的 storage 事件，我们可以监听该事件处理函数，当其他页面中的 localStorage 或 sessionStorage 中保存的数据发生改变时，就会执行事件处理函数。
监听 storage 事件的示例代码如下：
//window.addEventListener(事件名，事件处理函数)；window.addEventListener('storage',function(event){console.log(event.key);
});上述代码中，事件处理函数接收了一个 event 对象作为参数，event 对象的 key 属性保存发生变化的数据的键名。
event 对象的属性
| 属性 | 描述 |
| event.key | 获取在 sessionStorage 或 localStorage 中被修改的数据键名 |
| event.oldValue | 获取在 sessionStorage 或 localStorage 中被修改前的值 |
| event.newValue | 获取在 sessionStorage 或 localStorage 中被修改后的值 |
| event.url | 获取在 sessionStorage 或 localStorage 中发生修改的页面的 URL 地址 |
| event.storageArea | 获取变动的 sessionStorage 对象或 localStorage 对象 |
1.6 代码示例
1.6.1 demo1
1.6.2 deom2
说明 sessionStorage 存储的数据只在当前打开的浏览器标签中有效
1.6.3 demo3
旧的用户名：
1.7 练习
利用 localStorage 实现留言板效果，具体效果如下图所示，具体要求：
1. 在上面的文本框中输入内容点击留言按钮，可在下方区域显示留言内容和留言时间，同时查看应用程序工具中 localStorage 的内容；
2. 点击清除留言可以清空留言板中的内容，并显示“还没有留言”；
3. 改用 sessionStorage 实现，对比二者的区别。
简单的 web 存储留言板
原文地址: HTML5 Web Storage
