本地存储localstorage
哈喽大家好！前端开发时有个很实用的东西——本地储存，它能把网页里的数据储存下来~而且这个功能还是HTML5新添的！data咋存？就是用key-value这种encode形式存到电脑里，就能保证数据永远存在！不过有个区别要跟你说下，和sessionStorage比起来，localStorage的优点在于即使关掉网页，数据也会保留除非你亲自去清空或者用到最大容量了，那就没办法了。
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
使用local storage超简单哒，直接在JavaScript里用它的 object localStorage就行了。先用 setItem()存你想要的东西，要用时再用 getItem()拿出来，觉得没必要就用 removeItem()清理掉。这种储存方式很适合那些要长久保留但修改不多的数据，例如个人喜好啊、登录记录等等。
在IE9浏览器里得小心了因为LocalStorage不能直接打开电脑里的文档，所以要上线网站的话可得把项目搬进服务器。
...
本地存储sessionstorage
和那个叫Local Storage的玩意儿有点像，Session Storage是HTML5给我们准备的另一个本地存储神器。区别就是，你存放在这里面的信息，只要你关闭了这个网页或者浏览器窗口就会自动消失，特别适合同步保存一些需要保留的当前会话信息~
用sessionStorage就能搞定网页间的数据传输、临时存货这些事儿。但要记住，它只能在同一个页面里跑，不能到别的地方去。想要读写这个存储空间就得靠setItem()和getItem()这俩鬼东西了。
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
这两种本地存贮方法，前端开发用起来方便多，它们能帮我们更有效地管理客户端的数据，还能减轻服务器的负担！
manifest
text/cache-manifest
离线缓存呀就是用浏览器的缓存，就算没网，也能打开APP或者网页！HTML5里有个application cache就搞定这个功能。
Manifest文件就是下次再用时可直接从存储器里读取数据的东西啦～里面主要列了哪些该下到手机里备着，哪些得上网再下载。然后还要搞个备用方案，就是万一不行还能怎么办之类的。
要记得把MIME类型设对：放在服务器的manifest文件中，设成”text/cache-manifest”！还有那个名为status的属性，告诉我们应用的缓存现在啥情况：比如检查中，正在下载，或者被废除掉了之类的。
借助离线缓存这东西，你可以没网时也能看已缓存好的网页，提升上网体验还能给网站提速！
Web SQL
Web SQL这个API，它不是HTML5规定里的东西，不过是单独搞出一套能让咱们在客户端用SQL操纵数据库的方法。有了它，我们就能轻松玩转数据库，而且跟MySQL的操作语句差不多！
Web SQL数据库就是用openDatabase开启数据库，transaction搞定事务，有了 executeSql就能运行SQL语句~只要学会这几个API，我们就可以在客户端的数据库里瞎折腾，比如添加删除修改查询之类的。
对了解SQL语句和关系型数据库的开发者来说，Web SQL轻松易懂地处理客户端数据，帮你做出更专业、丰富的网络应用程序！
IndexedDB
HTML5里的IndexedDB，就是个提供大容量本地存储数据和离线web应用的好助手。比起WebSQL，它有个优势是使用“问问答”而不是“给我答案”的方式来执行任务。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调
IndexedDB基本就像咱用的图书馆一样，包括开馆、办活儿（处理事务）、立仓、改添删割啥的功能。它不讲表格这种事儿，只看objectStore当小单位，一个库里能有好多objectStore，各种东西都能用它放。
使用IndexedDB，开发者能更加方便地管理海量有规律的资料，还能用本地缓存提高网上应用的运行速度和反应度。碰到要求大量客户端处理，或者经常在没网络时也要使用数据的情况，IndexedDB可是个好帮手！
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
总的来说，前端HTML5那几个保存方法都挺厉害的，具体选哪个得看实际需求来决定，这样做可以大大提高用户感受以及网站速度！
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
。
评论0