什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速.
这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上
它也可以存储大量的数据，而不影响网站的性能。
数据以键/值对存在, web网页的数据只允许该网页访问使用。官方解释那么多，其实说白了 跟你用cookie方法一样，就是存数据，取数据浏览器支持度
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.
------------------------------------------------------------------------
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储//在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}片永久存储数据
localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用localStorage API
不管是 localStorage，还是 sessionStorage，
可使用的API都相同，常用的有如下几个（以localStorage为例）：
//添加键值对：
localStorage.setItem(key,value)
//获取键值：
localStorage.getItem(key)
//删除键值对
localStorage.removeItem(key)。
//清除所有键值对
localStorage.clear()。举例子
//这里我们模拟一个 存储用户名信息,推荐键值对写法
console.log(typeof(Storage)) //function
// 存储数据 用户名
localStorage.setItem('uaername','李三狼')
// 取出数据 用户名
let name = localStorage.getItem('username')
console.log(name) //李三狼
// 删除数据
localStorage.removeItem('username');
console.log(name) //null
//全部删除
localStorage.clear();
//这样我们就可以在登录的时候做判断了，然后存储当前的用户信息，或者做一些权限跳转处理引https://www.w3cschool.cn/tanzt0/af72kozt.html
使用web storage代替cookie
cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合规则的cookie数据.这会增加请求响应时间,特别是XHR请求. 在HTML5中使用sessionStorage和localStorage代替cookie是更好的做法.
这另种方法可以将数据永久或者以session时间存储在用户本地.数据不会随着HTTP请求传递.所以我们优先使用web storage,仅仅使用cookie作为替代方案.
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["unicorn", "Narwhal", "deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API
var date = new Date();
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["unicorn", "Narwhal", "deathbear"];' +
' expires=' + expires + '; path=/';
document.cookie = cookiestr;
}