HTML5本地存储

localStroage & sessionStroage

HTML5 提供了本地存储对象

window.localStroage - 存储没有截止日期的数据（localStorage 生命周期是永久，除非主动清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。）

window.sessionStroage - 针对一个 Session 的数据存储（仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。）

两者区别就是一个作为临时保存，一个长期保存。

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

localStroage

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
localStorage.setItem('Author', 'local');
// 2、从本地存储获取数据
localStorage.getItem('Author');
// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('Author');
// 4、清除所有保存的数据
localStorage.clear();

应用场景

实际工作中对 localstorage 的使用一般有以下需求：

• 缓存一般信息，如搜索页的出发城市，达到城市，非实时定位信息
• 缓存城市列表数据，这个数据往往比较大
• 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个时候在最近一次访问的时候要自动设置过期
• 每条信息具有过期日期状态，在过期外时间需要由服务器拉取数据
• …………

sessionStroage

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('Author', 'session');
// 2、从本地存储获取数据
sessionStorage.getItem('Author');
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('Author');
// 4、清除所有保存的数据
sessionStorage.clear();

其他

隐私模式下可以采用 window.name 模拟 sessionStorage 的方式处理，因为 window.name 是可做保存的，这个也是其解决跨域方案的原因。

postMessage

• 发送：调用 postMessage 方法的 window 对象是指要接收消息的那一个 window 对象

otherWindow.postMessage(message, targetOrigin, [transfer]);

• 监听：message 事件

window.addEventListener( "message", function(event) {alert(event.data);})

假设在 a.html 里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.com/a.html

window.onload = function() {
  window.addEventListener("message", function(event) {
      alert(event.data);
  });
  //window.frames[0].postMessage("b data", "http://www.b.com/b.html");
  //调用postMessage方法的window对象是指要接收消息的那一个window对象
}

b.com/b.html

window.onload = function() {
   //window.addEventListener("message", function(event) {
   //  alert(event.data);
   //});
   window.parent.postMessage("a需要的数据", "http://www.a.com/a.html");
}

• postMessage是从a窗口发送信息到b窗口，b窗口监听到消息后做出回应；
• localStorage是在a窗口改变某一个存储值，b窗口监听到了存储值的变化，然后获取该值，进而完成通信的同样的效果。

HTML5 应用缓存

在 Html5 中，提供了一种叫 Application Cache 应用程序缓存的技术，通俗解释就是，通过一个文本文件可以告诉浏览器，我这个网页中的资源，哪些本地有就直接用本地，哪些必须要去网络拉取。

其实就是离线资源使用，本地缓存，如果有缓存，就能提升页面访问速度，节省流量，也能减少服务端负载，进而节省带宽费用。

如何实现 HTML5 应用程序缓存？

• 创建一个 cache.manifest 文件，并确保文件具有正确的内容
• 在服务器上设置内容类型
• 所有的 HTML 文件都指向 cache.manifest

cache.manifest

CACHE MANIFEST
# version1
CACHE:
index.html
404.html
favicon.ico
robots.txt
humans.txt
apple-touch-icon.png
css/main.css
img/pho-cat.jpg

FALLBACK:
online.js local.js

NETWORK:
*

注意事项：

• 第一行必须是”CACHE DMANIFEST”文字，以把本文件的作用告知浏览器，即对本地缓存中的资源文件进行具体设置。
• 在 manifest 文件中，可以加上注释来进行一些必要说明或解释。注释行以”#”文字开头。
• 在 CACHE 之后的部分为列出我们需要缓存的文件。
• 在 FALLBACK 之后的部分每一行中指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。
• 在 NETWORK 之后可以指定在线白名单，即列出我们不希望离线存储的文件，因为通常它们的内容需要互联网访问才有意义。

另外，在此部分我们可以使用快捷方式：通配符*

这将告诉浏览器，应用服务器中获取没有在显示部分中提到的任何文件或 URL。