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-会话存储
- sessionStorage 的生命周期是仅在当前会话窗口下有效。即在浏览器关闭或者当前会话窗口关闭之前,sessionStorage数据一直都是存在的。
- 打开浏览器就相当于建立一次会话,sessionStorage-会话存储概念与服务器端的session概念相似,关闭页面或浏览器后被清除。
- 存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
- 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();
- 如果存储的数据是一个对象或是数组的时候,直接存储是不行的
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);
结果: