本地存储

1.本地存储

1.1本地存储的两个属性

localStorage,sessionStorage

• 特性：
  设置、读取方便
  容量较大，sessionStorage约5M、localStorage约20M
  只能存储字符串，可以将对象JSON.stringify() 编码后存储
• window.localStorage
  永久生效，除非手动删除（服务器方式访问然后清除缓存）
  可以多窗口（页面）共享
• window.sessionStorage
  生命周期为关闭浏览器窗口
  在同一个窗口(页面)下数据可以共享
• 方法
  setItem(key, value) 设置存储内容
  getItem(key) 读取存储内容
  removeItem(key) 删除键值为key的存储内容
  clear() 清空所有存储内容

同源
同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。
同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

1.2使用length属性和key(index)方法，传入0至length-1之间的数字，可以遍历所有存储数据的名字。

for(var i = 0; i < localStorage.length; i++) { //length表示所有键值对的总数
var name = localStorage.key(i); // 获取第i对的名字
var value = localStorage.getItem(name); // 获取name对应的值
}

1.3 存储事件

无论什么时候存储在localStorage或sessionStorage的数据发生改变，浏览器都会在其他对该数据可见的窗口对象上触发存储事件（但是，在对数据进行改变的窗口对象上是不会触发的）。如果浏览器有两个标签页都打开了来自同源的页面，其中一个页面在localStorage上存储了数据，那么另一个标签页就会接收到一个存储事件。要记住的是sessionStorage的作用域是限制在顶层窗口的，因此对sessionStorage的改变只有当有相牵连的窗口的时候才会触发存储事件。还需要注意的是，只有当存储数据真正发生改变时才会触发存储事件。像给已经存在的存储项设置一个一模一样的值，抑或是删除一个本来就不存在的存储项都是不会触发存储事件的。
为存储事件注册处理程序可以使用addEventListener()方法。在绝大多数浏览器中，还可以使用给window对象设置onstorage属性的方式。
注意点：onstorage当前页面不触发：

• 当前页面不同窗口触发。
• 另外的监听页面触发。
  与存储事件相关的事件对象有5个非常重要的属性：
• key : 修改或删除的key值，如果调用clear()时，该属性值为null
• newValue: 新设置的值，如果调用removeItem()时，该属性值为null
• oldValue : 调用改变前的value值；添加新项时，该属性值为null
• storageArea : 当前的storage对象
• url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）

补充

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe src="http://www.baidu.com"></iframe>