HTML5这名词挺高大上的？别急，我马上告诉你怎么回事儿。今天我们要看的是本地存储（localStorage）和会话存储（sessionStorage）这两样东西，其实特容易理解，就跟个口袋似的。关键，就是有了这俩宝贝，网页上的数据就能保存在电脑里，就算你换页面也不怕丢失真是实用极了！
你知道LocalStorage和SessionStorage？就像个储藏盒，存东西进去，要用时再取出来。但其实它们有点不太一样：SessionStorage每次只能用一次，用完就没了；而LocalStorage就厉害了，就算你不用它，它也会一直存在那，只有你自己动手才会被删掉。
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
localStorage：你的永久储物箱
试试想，有个神奇的LocalStorage就像小跟班，不管你关浏览器或者重启电脑它都默默帮你留下各种数据，像是你的设置、玩的游戏进度，甚至是随手记下来的琐事。等你重新打开浏览器，那些过去的记忆和小点点就能立刻还原了！
放心！学学localStorage超容易的，记住几个常用API就行。存值就是用localStorage.setItem(‘key’,’value’)搞定，要取出来也是localStorage.getItem(‘key’)，很方便？觉得某个值没用了就用localStorage.removeItem(‘key’)删掉，简单得不得了！
sessionStorage：一次性的记忆面包
SessionStorage，就是个只用得起一次的小袋子，只要打开网页就有。你可以暂时放点儿重要信息在这儿，比如说表格里填过的内容或者是你临时需要的设置之类。但是要注意，关掉浏览器窗口的话，这些数据就跟你吃完的小袋子一样消失不见
本地储存和Session储存其实用起来挺像滴，就是用`sessionStorage.setItem(‘key’,’value’)`存值，用`sessionStorage.getItem(‘key’)`取出来！不过得记住只要关了浏览器窗口，里面的数据可就没了！
HTML5的新魔法：离线Web应用
HTML5的小技巧你知道吗？那些除了localStorage和sessionStorage外，还有很多好玩的功能呀。就算网络突然断线了，网页应用还是能照常工作！
服务小哥（ServiceWorker）和索引大宝库（IndexedDB）这俩厉害了，就像是网络中的隐身侠，拦截所有的HTTP请求，还能根据需要把网页缓存起来，就算没网也能照样看；而IndexedDB，它是个强大的本地数据库，能装下超多数据，找资料速度飞快。
serviceworker：网络请求的守护者
你得知道ServiceWorker其实是咱Web和网扯上关系的一个超级东家。它能挡住HTTP请求，还会时不时帮你扫下浏览器上的缓存。要是找到了好东西，那可不得了，会直接从缓存里面取出来，根本不用等服务器回复。这样一来，就算网络不给力，你也照样能开心地上网，多好！
把serviceworker装上去，添点儿js代码就能搞定网页的网络请求。装好之后，优先把关键文件缓存起来。下次用户要下载，我们就在缓存里搜索一番，找到了就立马取出来用。
indexedDB：本地数据库的利器
IndexedDB就和电脑硬盘一样好用！存取速度超快的，网页上你要的信息，如账户配置，游戏进度，甚至是各种随手记都帮你好好保管着，就像个小型保险箱似的安全又方便！
idb挺容易玩的记得那几个常用的API，搞定它们就入门！首先，用databaseName调用indexedDb.open()打开你的数据库；然后嘞，用db.createObjectStore(‘storeName’)来搞个文档仓库，存点东西进去，再取出来不就是那么回事嘛～
HTML5的其他魔法道具
nbsp;html>
navigator.serviceWorker.register("/service-worker.js").then(function(serviceWorker) {
console.log("success!");
});
我们刚刚说到的网页存储（localStorage）、临时存储（sessionStorage）、服务工作者（serviceworker）和数据库（indexedDB）就是很牛逼！可是，HTML5还有一堆超厉害的实用功能！比如说WebWorker，它就像个小助手，帮你处理那些复杂的计算任务，还不耽误浏览器干活。再比如WebRTC，它能让你跟人直接语音或视频聊天。最后说说WebSockets，它能帮你做到实时双向通讯哟。
有了这货，咱网站跑得飞快，稳定得很呐！玩游戏、开视频会、上网络课堂统统毫无压力。就算网络断了也不怕，照样好用，牛不？
HTML5的未来展望
this.oninstall = function(e) {
var resources = new Cache();
var visited = new Cache();
// Fetch them.
e.waitUntil(resources.add(
"/index.html",
"/fallback.html",
"/css/base.css",
"/js/app.js",
"/img/logo.png"
).then(function() {
// Add caches to the global caches.
return Promise.all([
caches.set("v1", resources),
caches.set("visited", visited)
]);
}));
};
this.onfetch = function(e) {
e.respondWith(
// Check to see if request is found in cache
caches.match(e.request).catch(function() {
// It's not? Prime the cache and return the response.
return caches.get("visited").then(function(visited) {
return fetch(e.request).then(function(response) {
visited.put(e.request, response);
// Don't bother waiting, respond already.
return response;
});
});
}).catch(function() {
// Connection is down? Simply fallback to a pre-cached page.
return caches.match("/fallback.html");
});
);
};
哎呀妈HTML5这玩意真心厉害。用它做网页，简直就像开着火箭飞上天！有了localStorage和sessionStorage这俩好兄弟帮忙，还有各种新API，断网也不怕！HTML5肯定会越来越强大，带来更多好玩儿又实用的东西，让咱们的网页变得更炫酷！
以后网页应用能跟手机上的一样强大，功能繁多得很，还超级顺畅，用起来太痛快了。即便没有网络也没问题炫酷无比！HTML5这个东西就像是万能的口袋，装上它之后我们的网页就能变得更厉害、更聪明了。
评论0