HTML5本地存储
HTML5本地存储使将值存储在浏览器中成为可能，该值可以在浏览器会话中保留下来。这样，HTML5本地存储类似于cookie，但是有一些区别，我将在本教程的后面部分讨论这一点。 HTML5本地存储还可以在浏览器窗口之间发送事件。一个非常有用的功能。此HTML5本地存储教程将说明如何使用HTML5本地存储来实现此目的。
本地存储是HTML中的新规范。它实际上不是HTML5规范的一部分，但它是在同一时间诞生的，通常被称为是新HTML平台(HTML5)的一部分。因此，我将本地存储教程包括在HTML5教程资源中。
HTML5本地存储与Cookie
如前所述，HTML5本地存储与cookie相似，因为这两种机制均可用于在HTTP请求之间的浏览器中存储数据。但是HTML5本地存储和cookie之间是有区别的。
Cookie是服务器可以存储在浏览器中的一小部分数据。 Cookie由浏览器与所有将来的HTTP请求一起发送到设置cookie的服务器。 Cookie的总大小不能超过4KB。
HTML5本地存储是通过在浏览器中执行的JavaScript设置的。 HTML5本地存储属性永远不会发送到任何服务器，除非我们将它们明确地从本地存储中复制出来并将它们添加到AJAX请求中。 HTML5本地存储可以在浏览器中存储2MB到10MB之间的数据(按原始域名)。究竟允许多少数据取决于浏览器。最常见的限制是5MB到10MB。
HTML5本地存储安全性
HTML5本地存储中设置的属性只能由与设置属性的页面位于同一域中的页面读取。因此，如果Hyman.com的页面设置了一些本地存储属性，则只有Hyman.com的页面可以读取这些属性。 URL不必相同，但域名必须相同。
HTML5本地存储基础知识
HTML5本地存储提供了一个简单的键值存储，例如哈希表或者字典对象。实际上，本地存储对象看起来与常规JavaScript对象非常相似，不同之处在于，即使页面已卸载，它也存储在浏览器中。
本地存储与会话存储
本地存储有两个版本：
- 会话存储
- 本地存储
只要打开窗口，会话存储就可以在同一浏览器窗口中使用。当浏览器窗口关闭时，与该窗口关联的会话存储将被删除。来自相同来源(URL)的多个窗口无法看到彼此的会话存储。从同一窗口打开的弹出窗口可以看到会话存储，同一窗口内的iframe也可以看到会话存储。
浏览器中的本地存储可用于具有相同来源(域)的所有窗口。窗口关闭后，存储在本地存储器中的数据也将可用。下次打开窗口并从同一原点加载页面时，页面可以再次访问那里的存储值。
sessionStorage + localStorage
可以通过以下两个全局可用的JavaScript对象访问会话存储和本地存储：
sessionStoragelocalStorage
以相同的方式访问" sessionStorage"对象和" localStorage"对象。只是存储的数据的寿命和可见性不同。
设定属性
我们可以像使用普通JavaScript对象一样，在sessionStorage和localStorage对象上设置属性。这是一个例子：
sessionStorage.myProperty = "Hello World"; localStorage.myProperty = "Hello World";
此代码示例的第一行将会话存储属性" myProperty"设置为值" Hello World"。第二行将本地存储属性" myProperty"设置为值" Hello World"。
如果属性名称包含JavaScript变量名称中不允许使用的字符，则需要使用方括号访问模式来设置属性，如下所示：
sessionStorage["Invalid JS Property Name"] = "Hello World";
localStorage["Invalid JS Property Name"] = "Hello World";
或者，我们可以使用setItem()函数，如下所示：
sessionStorage.setItem("Invalid JS Property Name", "Hello World");
获取属性
我们可以从sessionStorage和localStorage对象获取属性，如下所示：
var myProp = sessionStorage.myProperty; var myProp = localStorage.myProperty;
如果属性名称不是有效的JavaScript变量名称，则需要使用方括号访问方法，如下所示：
var myProp = sessionStorage["myProperty"]; var myProp = localStorage["myProperty"];
或者我们可以使用getItem()函数，如下所示：
var myProp = sessionStorage.getItem("myProperty");
var myProp = localStorage.getItem("myProperty");
删除属性
我们可以像这样删除会话或者本地存储属性：
delete sessionStorage.myProperty; delete localStorage.myProperty;
或者，我们可以使用removeItem()函数，如下所示：
sessionStorage.removeItem ("myProperty");
清除本地存储
如果要删除存储在" sessionStorage"或者" localStorage"对象中的所有属性，则可以使用" clear()"函数。这是一个clear()函数调用示例：
sessionStorage.clear(); localStorage.clear();
读取存储的属性数
我们可以使用length属性读取存储在sessionStorage对象或者localStorage对象中的属性的数量，如下所示：
var length = sessionStorage.length; var length = localStorage.length;
迭代本地存储中的密钥
我们可以迭代存储在" sessionStorage"或者" localStorage"中的键值对的键(属性名称)，如下所示：
for(var i=0; i < sessionStorage.length; i++){
var propertyName = sessionStorage.key(i);
console.log( i + " : " + propertyName + " = " +
sessionStorage.getItem(propertyName));
}
sessionStorage.length属性返回存储在sessionStorage对象中的属性数。
函数key()返回属性的属性名(或者键名)，并将索引作为参数传递给函数。
我们可以以相同的方式迭代localStorage的键。在上面的示例中，只需将" sessionStorage"对象与" localStorage"对象交换即可。
本地存储事件
当我们修改sessionStorage或者localStorage时，浏览器将触发存储事件。当我们插入，更新或者删除" sessionStorage"或者" localStorage"属性时，会触发存储事件。
存储事件仅在执行修改的窗口之外的其他浏览器窗口中发出。对于" sessionStorage"，这意味着事件仅在弹出窗口和iframe中可见，因为每个浏览器窗口都有自己的" sessionStorage"对象。
对于跨浏览器窗口共享的" localStorage"对象，所有其他以相同来源(协议+域名)打开的窗口都可以看到事件，包括弹出窗口和iframe。
添加存储事件侦听器
将事件侦听器添加到本地存储对象的操作如下：
function onStorageEvent(storageEvent){
alert("storage event");
}
window.addEventListener('storage', onStorageEvent, false);
函数" onStorageEvent()"是事件处理函数。
addEventListener()函数调用将事件处理函数添加到存储事件。
传递给事件处理函数的storageEvent事件对象如下所示：
StorageEvent {
key; // name of the property set, changed etc.
oldValue; // old value of property before change
newValue; // new value of property after change
url; // url of page that made the change
storageArea; // localStorage or sessionStorage,
// depending on where the change happened.
}
我们可以从事件处理程序函数内部访问此存储事件对象。
