HTML5 Web 存储-localStorage和sessionStorage

HTML5 Web 存储-localStorage和sessionStorage

 

1）HTML5 Web 存储实际上是Cookies存储的进化版

2）HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。

3）HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。

【1】localStorage-本地存储

1）localStorage生命周期是永久 ，域内安全，即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据，除非主动清除localStorage信息，否则这些信息将永远存在。

2）存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，但客户端或浏览器之间的数据相互独立，不参与和服务器的通信。

3）方法

localStorage.key(int index);//根据索引找到key值。若没有返回null。localStorage.setItem("key", "value"); //存储数据信息到本地

var strvalue = localStorage.getItem("key"); //读取本地存储的信息

localStorage.removeItem("key");//删除本地存储的信息

localStorage.clear();// 清空所有本地存储的信息

【2】sessionStorage-会话存储

1.  sessionStorage 的生命周期是仅在当前会话窗口下有效。即在浏览器关闭或者当前会话窗口关闭之前，sessionStorage数据一直都是存在的。
2. 打开浏览器就相当于建立一次会话，sessionStorage-会话存储概念与服务器端的session概念相似，关闭页面或浏览器后被清除。
3. 存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
4. sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致。

sessionStorage.key(int index);//根据索引找到key值。若没有返回null。

var strvalue =sessionStorage.getItem("key");//读取会话存储的信息

sessionStorage.setItem("key", "value"); //存储数据信息到同一窗口(或标签页)

sessionStorage.removeItem("key");//将指定会话存储的信息移除。

sessionStorage.clear();//清除所有会话存储的信息

【3】复杂数据存储

1）一般情况都是简单的数据类型的存储

sessionStorage.setItem("user","张三");

sessionStorage.setItem("password","123456");

var user= sessionStorage.getItem("user");

var password= sessionStorage.getItem("password");

sessionStorage.clear();

1. 如果存储的数据是一个对象或是数组的时候，直接存储是不行的

var userinfor={"user":"张三","password":"123456"};

sessionStorage.setItem("userinfor","userinfor");

var userinfor = sessionStorage.getItem("userinfor");

 console.log(userinfor);

结果：

---------------------------------------------------------------------------------------------------------------------------------

3）正确的写法就需要转换数据格式。

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

//【1】创建userinfor对象

      var userinfor={"user":"张三","password":"123456"};

      //【2】利用JSON.stringify将对象转换成字符串

      userinfor = JSON.stringify(userinfor);

      //【3】存储数据信息到同一窗口(或标签页)

      sessionStorage.setItem("userinfor",userinfor);

      //【4】读取会话存储的信息

      var user = sessionStorage.getItem("userinfor");

      console.log(user);

      //利用JSON.parse将字符串转换成对象

      user = JSON.parse(user);

      console.log(user);

结果：