-
HTML5引入了两个用于本地存储的API, 分别是sessionStorage和localStorage，二者的使用方式是相同的，不同的是所存储数据的存在时长。sessionStorage存储的数据会在浏览器关闭的时候被清除，而localStorage存储的数据会长期存在，除非用户主动清除数据。使用方式如下。
var user_id = "123456";var user_data = { name: "Timo", sex: "unkown", tel: "666666" } //检测浏览器是否支持 Storage APIs var storage_support = window.sessionStorage || window.localStorage; if (storage_support) { localStorage.setItem(user_id, JSON.stringify(user_data)); sessionStorage.setItem(user_id, JSON.stringify(user_data)); }
上面的代码用到了 JSON.stringify() 方法，一般来说我们用 JSON 来序列化复杂的数据对象。既然我们将数据保存下来了，那么我们如何获取呢？
var user_id = "123456";
var user_data = {};
if (sessionStorage.getItem(user_id)) {
user_data = JSON.parse(sessionStorage.getItem(user_id));
} else if (localStorage.getItem(user_id)) {
user_data = JSON.parse(localStorage.getItem(user_id));
}
大多数的浏览器会给这些存储器 5MB 的空间，这对于 localStorage 可能就有点不够用了，毕竟它存储的数据根本就没有过期期限，除非用户明确的删除它们。所以，我们需要手动的设置一种过期机制，下面我们设置当数据存在 10 天之后就自动删除的功能。
//检测浏览器是否支持 Storage APIs
var storage_support = window.localStorage;
if (storage_support) {
localStorage.setItem(user_id, JSON.stringify(user_data));
//下面开始删除过期数据
var key, data;
for (var i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
data = localStorage.getItem(key);
if (data.ts < ((new Date()) - 60 * 60 * 24 * 10)) {
localStorage.removeItem(key);
}
}
}
可见，我们是在每次保存好数据，然后进行检测，一旦发现存在时间超过十天的数据，就对其进行删除。
-
HTML5定义了一个特殊的应用程序缓存，通常叫作appcache，我们可以利用这个告诉浏览器我们想要缓存的html, js, html或者图片资源。首先，我们需要创建一个manifest文件，比如下面
CACHE MANIFESTCACHE: index01.html
这个文件表明，我们想要缓存 index01.html ，想要具备离线缓存功能，我们还需要给 html 元素添加一个属性。
<html lang="en" manifest="cache.manifest">
当我们的页面配置发生了变化，比如说我们缓存的 index01.html 文件内容发生了变化，浏览器并不会重新缓存 index01.html，因为 manifest 文件并没有更新，所以浏览器呈现的还是变化前的界面，这就非常烦人了，但是有一种非常简单的方法可以解决这个问题，我们只需要在文件中添加一行注释，如下所示
CACHE MANIFEST
# cache version: 01
CACHE:
index01.html
每当我们更新缓存文件的内容的时候，就让注释的版本增加，这样的话浏览器就会察觉到 manifest 的变化，然后去更新 appcache 的内容，不过这么做有个缺点，那就是浏览器即使察觉到了 manifest， 它仍然会加载原来的界面直到下次再打开浏览器才会显示更新后的界面。当然，这种情况我们可以在 JS 中调节它。
// 检查当前浏览器是否支持 appcache
var appcache_support = !!window.applicationCache;
if (appcache_support) {
var cache = applicationCache;
cache.addEventListener("updateready", function () {
if (cache.status == cache.UPDATEREADY) {
cache.swapCache();
console.log("update");
}
}, false);
}
-
HTML5提供了Web Workers用以执行耗时任务，这个任务是处在一个单独线程中的，不占用UI线程，所以不会引起界面卡顿。详细的使用规范，可以参见 W3C Web Worker. -
如果想要创建在
Web应用程序和服务器之间的持久的，双向的通信，以便浏览器和服务器都能够按照彼此的需要发送和接收信息，那么你可能会用到Web Sockets，由于对于Web Sockets的一致的浏览器支持是很难得，所以最佳的做法是使用Socket.io中的一个库。想要了解更多的信息，可以参见 Socket.io.
网友评论