浏览器本地存储

webStorage

Web Storage是HTML5中新增的除Canvas元素以外，非常非常重要的功能！没有之一！顾名思义，其就是在Web端存储数据的功能，当然这里的存储只是针对客户端本地而言的。

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

localStorage与sessionStorage

1. localStorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。

2. localStorage：没有时间限制的存储方式。存储的时间是永久的！关闭浏览器数据不会随着消失，当再次打开浏览器时，数据依然可以访问！也就是说除非你主动删除数据，否则数据是永远不会过期的。

3. sessionStorage：保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器，所有的 session数据也会消失！

相关API

1. xxxxxStorage.setItem('key', 'value');
   该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxxStorage.getItem('person');

   ​ 该方法接受一个键名作为参数，返回键名对应的值。

3. xxxxxStorage.removeItem('key');

   ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

4. xxxxxStorage.clear()

   ​ 该方法会清空存储中的所有数据。

例子

 <script>
        let p = { name: 'Jack', age: 18 }
        // 添加操作
        function save() {
            // 若value为对象，建议先将对象转为JSON字符串再传入
            localStorage.setItem('student', JSON.stringify(p))
        }
        // 读取操作
        function get() {
            console.log(JSON.parse(localStorage.getItem('student')));
        }
        // 删除操作
        function remove() {
            localStorage.removeItem('student')
        }
        // 清空操作
        function removeAll(){
            localStorage.clear()
        }
 
    </script>

备注

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

Web Storage的优缺点

1. 优点：

   1. 存储空间更大。在IE下每个独立存储空间为10M，其它浏览器存储空间略有不同，但可以肯定的是至少要比cookie要大很多。
   2. 存储内容不会与服务器发生任何交互，数据仅仅单纯地存储在本地。不用担心对服务器数据的影响！
   3. 独立的存储空间，每个域都有自己独立的存储空间，各个存储空间又完全是独立的，所以不会对数据千万混乱。

2. 缺点：

   1. 存储在本地的数据未加密且永远不会过期，容易造成隐私泄漏！
   2. 存储的数据类型只能是字符串！（也勉强算是个不是问题的小问题吧）

浏览器查看webStorage

1.通过浏览器（以Chrome为例）的开发者工具