html5中的Web Storage包括了两种存储方式。localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问。并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。
一.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据：
sessionStorage.setItem(key, value)
获取数据：
sessionStorage.getItem(key)
删除数据：
sessionStorage.removeItem(key)
清空数据：(所有都清除掉)
sessionStorage.clear()
二.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口同一浏览器可以共享
3、以键值对的形式存储使用
存储数据：
localStorage.setItem(key, value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
清空数据：(所有都清除掉)
localStorage.clear()
三.练习
<body>
<input type="text" placeholder="请输入"/>
<hr />
<button class="set">存储本地数据</button>
<button class="get">获取本地数据</button>
<button class="remove">删除本地数据</button>
<button class="del">清空本地所有数据</button>
<script type="text/javascript">
var input = document.querySelector('input')
var setter = document.querySelector('.set')
var getter = document.querySelector('.get')
var remove = document.querySelector('.remove')
var del = document.querySelector('.del')
setter.addEventListener('click',function(){
var val = input.value
window.localStorage.setItem('username',val)
},false)//存储
getter.addEventListener('click',function(){
console.log(window.localStorage.getItem('username'));
},false)//获取
remove.addEventListener('click',function(){
window.localStorage.removeItem('username');
},false)//删除
del.addEventListener('click',function(){
window.localStorage.clear();
},false)//清空
</script>四.案例：个人用户
<body>
<input type="text" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<label>记住用户名</label>
</body>
<script type="text/javascript">
var user = document.querySelector('input')
var rem = user.nextElementSibling;
console.log(localStorage.getItem('user'));
if (localStorage.getItem('user')) {
user.value = localStorage.getItem('user')
rem.checked = true
}
rem.addEventListener('change', mode)
function mode() {
if (this.checked) {
localStorage.setItem('user', user.value);
} else {
localStorage.removeItem('user');
}
}
</script>