学习HTML5五种存储方式，轻松掌握网站数据持久化技巧？

小明：浏览器里的神奇魔法袋

你知道吗？现在上网的浏览器就像一个小小的魔法袋， Ke以装下hen多东西，而且这些东西还会一直保存着，就算你关了电脑，再打开，它还在那里。这就是我们今天要讲的主题——HTML5的五种存储方式，有啥用呢？。

1. localStorage：永久的存储小宝藏

什么是localStorage？

localStorage就像是一个永久的存储小宝藏， 你Ke以把任何东西放进去， 不堪入目。 而且这些东西会一直留在那里除非你自己说“不”。

怎么用？

小明放东西：

localStorage.setItem;

var name = localStorage.getItem;

2. sessionStorage：临时的存储小玩偶

什么是sessionStorage？

sessionStorage就像是一个临时的存储小玩偶， 你在它里面放的东西，只要你关了电脑，或者浏览器窗口，它就会消失不见，原来小丑是我。。

sessionStorage.setItem;

var name = sessionStorage.getItem;

3. 离线缓存：网络中断也Neng玩的游戏

什么是离线缓存？

离线缓存就像是一个游戏， 你Ke以在没有网络的情况下玩，主要原因是游戏里的东西Yi经被下载到你的电脑里了。

小明设置离线缓存：

离线缓存文件demo.appcache内容：，绝绝子...

CACHE MANIFEST
#--24v1.
/me.css
/main.js
NETWORK:
login.jsp
FALLBACK:
/html//offline.html

4. Web SQL：数据库里的秘密小屋

什么是Web SQL？

Web SQL就像是一个秘密小屋， 你Ke以在里面存放hen多秘密，通过特殊的语言来管理这些秘密。

小明创建数据库：

var db = openDatabase;
db.transaction {
  tx.executeSql');
});

小明插入数据：

db.transaction {
  tx.executeSql VALUES ', );
});

5. IndexedDB：数据库里的超级英雄

什么是IndexedDB？

IndexedDB就像是一个超级英雄，它Ke以在数据库里快速地找到你需要的东西。

var request = indexedDB.open;
request.onupgradeneeded = function {
  var db = e.target.result;
  db.createObjectStore;
};

db.transaction {
  tx.store.add;
});

小结：浏览器里的神奇魔法袋

好了今天的魔法袋之旅就到这里结束了。希望你Neng喜欢这些魔法，它们Ke以让你的网站变得geng加神奇和有趣。 往白了说... 下次我们再一起探索geng多的HTML5奥秘！