一、常用的存储方式:
(1) localStorage 和 SessionStorage
(2) cookie
(3) ie userData
(4) 应用程序存储
二、localStorage和 SessionStorage
首先,localStorage和SessionStorage是由Storage实例出的两个对象。
①我们来看一下 最简单的使用方法
例1:
// 储存一个数字
localStorage.uiNum = 10;
// 读取这个数字
var uiNum = parseInt(localStorage.uiNum);
//同样,可以使用localStorage储存json类型
localStorage.jsJson = JSON.stringify(data);
//读取json类型
var data = JSON.parse(localStorage.jsJson);
(2)SessionStorage的使用方法和 LocalStorage 类似。
②接下来,我们来看一下localStorage和SessionStorage的 有效期 和 作用域
有效期:
LocalStorage的有效期 是永久。除非用户删除,否则,一直保存在用户电脑上。
SessionStorage的有效期: 一旦标签页 或者 窗口关闭了,SessionStorage存储的数据也删除了。
作用域:
LocalStorage:同一个浏览器下,同一个源的数据之间共享,可以互相读取 和 更改。
SessionStorage: 同源,同一个顶级窗口下的数据 之间共享,但如果 是同源的两个标签页,下的数据之间是不共享的。
注释: 同源的概念 : (1)协议相同 (2)主机相同 (3)端口相同
③ 既然同源同浏览器的localStorage数据共享,那么如何进行 数据交互呢?
关键事件: onstorage() 有数据发生改变时的响应事件
关键属性: key : 改变的属性 ,如果是clear 删除,key为null
newValue : 该项的新值 ,如果是删除属性, 值为null
oldValue: 原先的值 , 如果是增加属性,值为null
url: 触发变化的url
window.onload = function(){
window.addEventListener("storage", storageChange, false);
}
(2)标签甲改变了数据,在当前页面不会触发事件。