二十八、HTML 5 Web 存储（H5存储 ★★★★）！！！

概念
webStorage（H5存储）是新型的本地存储技术，这种技术在今天的浏览器中基本上已经全部支持(IE8以上)。

H5存储中有两个对象：

localStorage:用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage:用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage的浏览器支持情况
在今天的浏览器中几乎已经没有不支持localStorage的情况了，官方明确指出在IE8及更高的浏览器中都支持。当然也不能排除一些用户依然在使用更低版本的浏览器，所以我们在使用localStorage的时候可以先行判断。

localStorage与cookie比较

cookie的优点：
可以与服务器交互，浏览器自动管理不同站点的cookie数据并自动发送到服务器。
可以由程序员设置过期时间实现灵活的页面交互(例如7天免登陆)

cookie的缺点：
明文存储，安全性受限
数据数量受限(由浏览器指定个数，一般为50个)
数据大小受限(一般为4KB)

localStorage的优点：
操作简单(相对于cookie)
不会自动发送到服务器
存储空间大(5MB-10MB，具体由各浏览器指定)
不会过期，不用担心数据过其而丢失数据

localStorage的缺点：
不会过期，如果不手动清除就一直存在可能会造成存储过多而影响网站性能
明文存储，安全性受限
这里着重的强调下：localStorage不会过期。

语法
保存数据：localStorage/sessionStorage.setItem(key,value);

读取数据：localStorage/sessionStorage.getItem(key);

删除单个数据：localStorage/sessionStorage.removeItem(key);

删除所有数据：localStorage/sessionStorage.clear();

练习

分别通过localStorage和sessionStorage存储用户信息 -> 查看特性

localStorage

<meta charset="utf-8" />
<script>
/*
明确需求：
    以前：存储信息都用cookie
    现在：都用H5存储 / HTML5 WEB 存储  / H5离线存储

好处：
    在cookie思想上升级
    存储空间升级
    减轻服务器压力（因为每次请求服务器都会带上cookie）

语法

    永久
    localStorage.setItem(键，值)
    localStorage.getItem(键)
    localStorage.removeItem(键)   

    临时（仅限一个窗口）  
    sessionStorage.setItem(键，值)
    sessionStorage.getItem(键)
    sessionStorage.removeItem(键)   
*/

// 分别通过localStorage和sessionStorage存储用户信息 -> 查看特性
// name=唐山赵子龙
// age=18

localStorage.setItem('name', '唐山赵子龙')
localStorage.setItem('age', 18)

console.log(localStorage.getItem('name'))
console.log(localStorage.getItem('age'))

sessionStorage

<meta charset="utf-8" />
<script>
/*
明确需求：
    以前：存储信息都用cookie
    现在：都用H5存储 / HTML5 WEB 存储  / H5离线存储

好处：
    在cookie思想上升级
    存储空间升级
    减轻服务器压力（因为每次请求服务器都会带上cookie）

语法

    永久
    localStorage.setItem(键，值)
    localStorage.getItem(键)
    localStorage.removeItem(键)   

    临时（仅限一个窗口）  
    sessionStorage.setItem(键，值)
    sessionStorage.getItem(键)
    sessionStorage.removeItem(键)   
*/

// 分别通过localStorage和sessionStorage存储用户信息 -> 查看特性
// name=唐山赵子龙
// age=18


sessionStorage.setItem('name', '唐山赵子龙')
sessionStorage.setItem('age', 18)

console.log(sessionStorage.getItem('name'))
console.log(sessionStorage.getItem('age'))
</script>

总结：

明确需求：
以前：存储信息都用cookie
现在：都用H5存储 / HTML5 WEB 存储 / H5离线存储

好处：
在cookie思想上升级
存储空间升级
减轻服务器压力（因为每次请求服务器都会带上cookie）

语法

永久
localStorage.setItem(键，值)
localStorage.getItem(键)
localStorage.removeItem(键)   

临时（仅限一个窗口）  
sessionStorage.setItem(键，值)
sessionStorage.getItem(键)
sessionStorage.removeItem(键)