本地储存
为什么需要本地存储呢：
数据存储在用户浏览器中，在控制台中Application模块中查看。
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储 Application模块：
本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？
分别来说：
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
window.localStorage
声明周期永久生效，除非手动删除 否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
最大的区别：生命周期的不同，sessionStorage在浏览器存储数据的页面关闭以后存储的数据就消失了，但是localStorage即使浏览器存储数据的页面关闭了，数据也不会丢失，那怎么删除localStorage存储的数据呢？使用localStorage.removeItem(key)和localStorage.clear()语句来删除。
相同点：都是用来存储数据的并且代码语法结构相似。下面细说一下存储数据结构的代码：
sessionStorage相关语法：
存储数据：
sessionStorage.setItem(key, value) 1 获取数据：
sessionStorage.getItem(key) 1 删除数据：
sessionStorage.removeItem(key) 1 清空数据：(所有都清除掉)
sessionStorage.clear() 1 localStorage相关语法：
存储数据：
localStorage.setItem(key, value) 1 获取数据：
localStorage.getItem(key) 1 删除数据：
localStorage.removeItem(key) 1 清空数据：(所有都清除掉)
localStorage.clear() 1 写一个小demo： 写一个案例存储数据的案例：localStorage的语法是一样的所以在这里使用sessionStorage存储： 演示： 存储一个名字叫king的数据到本地，并且在控制台查询出来，最后删除
在这里点击存储数据，看Application中sessionStorage数据的变化：
点击获取数据：
点击删除数据或者删除所有数据：（因为只存储了一个数据，所以两个按钮的效果是一样的）
HTML部分：
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="delete">删除数据</button>
<button class="delete-all">删除所有数据</button>
JS部分：
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
// 点击存储数据按钮 给本地存储一条数据（通过键值对存储 ，键随意设置，值是文本框的值）
set.addEventListener('click', function() {
var content = ipt.value;
sessionStorage.setItem('uname', content);
});
// 点击获取数据按钮 获取存储的数据（通过键来获取）
var get = document.querySelector('.get');
get.addEventListener('click', function() {
console.log(sessionStorage.getItem('uname'));
});
// 点击删除数据按钮 删除指定键对应的值
var del = document.querySelector('.delete');
del.addEventListener('click', function() {
sessionStorage.removeItem('uname');
});
// 点击删除所有数据，删除所有的键值对
var del_all = document.querySelector('.delete-all');
del_all.addEventListener('click', function() {
sessionStorage.clear();
});
