前端存储方式sessionStorage和localStorage。sessionStorage用于本地存储一个会话（s

Web Storage包括两种存储方式：

sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话的页面才能访问，会话结束后数据也会随之销毁，因此sessionStorage和localStorage的主要区别在于他们存储数据的生命周期，sessionStorage存储的数据的生命周期是一个会话，而laocalStorage存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期。

Web Storage和cookie的异同点及优劣势

相同之处：（1）他们都可以用于存储用户数据。

（2）他们存储数据的格式都是字符串形式

（3）他们存储的数据都有大小限制

不同之处：（1）他们的生命周期不同。sessionStorage 的生命周期是一个会话，localStorage的生命周期是永久，cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问。

（2）存储的数据大小限制不同。大部分现代浏览器Storage的存储限制大小未5M，cookie的存储大小限制为4k

（3）浏览器支持不同，API调用方式不同。 localStorage 和 sessionStorage 有着统一的API接口，这为二者的操作提供了极大的便利。下面以 localStorage 为例来介绍一下 API 接口使用方法，同样这些接口也适用于 sessionStorage。

添加键值对：localStorage.setItem(key, value)setItem 用于把值 value 存储到键key上，除了使用 setItem ，还可以使用 localStorage.key = value 或者 localStorage['key'] = value 这两种形式。另外需要注意的是，key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString() 方法来转换成字符串再存储。当我们要存储对象是，应先转换成我们可识别的字符串格式（比如JSON格式）再进行存储。



    // 把一个用户名(lilei)存储到 name 的键上
    localStorage.setItem('name', 'lilei');
    // localStorage.name = 'lilei';
    // localStorage['name'] = 'lilei';
    // 把一个用户存储到user的键上
    localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));

获取键值：localStorage.getItem(key)getItem 用于获取键 key 对应的数据，和 setItem 一样，getItem 也有两种等效形式 value = localStorage.key和 value = localStorage['key'] 。获取到的 value 值是字符串类型，如果需要其他类型，要做手动的类型转换。


    // 获取存储到 name 的键上的值
    var name = localStorage.getItem('name');
    // var name = localStorage.name;
    // var name = localStorage['name'];
    // 获取存储到user的键上的值
    var user = JSON.parse(localStorage.getItem('user'));

删除键值对：localStorage.removeItem(key)removeItem 用于删除指定键的项，localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。

    var name = localStorage.getItem('name'); // 'lilei'
    // 删除存储到 name 的键上的值
    localStorage.removeItem('name');
    name = localStorage.getItem('name'); // null

清除所有键值对：localStorage.clear()clear 用于删除所有存储的内容，它和removeItem不同的地方是removeItem 删除的是某一项，而clear是删除所有。

    // 清除 localStorage
    localStorage.clear();
    var len = localStorage.length; // 0

获取 localStorage 的属性名称(键名称)：localStorage.key(index)key 方法用于获取指定索引的键名称。需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小, key方法可用于遍历 localStorage 存储的键值。

    localStorage.setItem('name','lilei');
    var key = localStorage.key(0); // 'name'
    localStorage.setItem('age', 10);
    key = localStorage.key(0); // 'age'
    key = localStorage.key(1); // 'name'

获取 localStorage 中保存的键值对的数量：localStorage.lengthlength 属性用于获取 localStorage 中键值对的数量。

    localStorage.setItem('name','lilei');
    var len = localStorage.len; // 1
    localStorage.setItem('age', 10);
    len = localStorage.len; // 2

实训：登录时获取判断账户是否为“admin”，选择性加功能

step1：登录时，存储获取用户类型。

这时你就会在服务器端看到存储的“account”值未“admin”

step2：使用。首先现在使用的页面进行定义。

然后使用