本地存储 sessionStorage和localStorage

什么是 HTML 本地存储？

通过本地存储（web Storage）web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。

本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

HTML 本地存储对象

HTML 本地存储提供了两个对象：

localStorage和sessionStorage

1、localStorage 在本地永久性存储数据，除非显式将其删除或清空。

2、sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。

两个对象都有共同的属性和方法

属性

Storage.length （ 唯一的属性 - 只读）
返回一个整数，用来获取 Storage 对象中的数据项数量。

方法
1、key

Storage.key()
该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。（根据index索引获取storage的键名）

2、getItem

Storage.getItem()
该方法接受一个键名作为参数，返回键名对应的值。（根据key获取storage内的对应value）

3、setItem

Storage.setItem()
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。（为storage内添加键值对）

4、removeItem

Storage.removeItem()
该方法接受一个键名作为参数，并把该键名从存储中删除。（根据键名，删除键值对）

5、clear

Storage.clear()
调用该方法会清空存储中的所有键名。（清空所有storage对象）

练习地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Storage#%E5%B1%9E%E6%80%A7

总结：

   length： 唯一的属性，只读，用来获取storage内的键值对数量。
   
   key：根据index获取storage的键名
   
   getItem：根据key获取storage内的对应value
   
   setItem：为storage内添加键值对
   
   removeItem：根据键名，删除键值对
   
   clear：清空storage对象

sessionStorage和localStorage的优点

1 缓存数据
2 减少对内存的占用

storage只能存储字符串的数据，对于JS中常用的数据或对象却不能直接存储。
我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了。请看下面的代码：

    //定义个 字符串
    var str = '{ "name": "programer", "age": "18" }';  

JSON字符串转换为JSON对象

  var obj = str