大家都用网络找东西？那咋知道你是谁？让我告诉你这个秘密，从最早的HTML4Cookie到现在的HTML5本地储存，看看它们的变化！
Cookie的局限性
以前，当我们是用HTML4时，会用到cookies来保存一些简单的用户信息，比如类似身份证号那样的号码。可惜这个小家伙存储能力有限，有点小气哩。还有就是，cookie默认设置是无论需不需要，都会把用户信息跟着http请求传到服务器去处理，这可是个费力不讨好的事儿
HTML5的新革命
你知道吗？HTML5一出来，储存技术也跟着变了好多！利用JavaScript新搞出的玩意儿，我们可以轻轻松松在浏览器里存下一堆数据，甚至还能搞个像模像样的本地数据库！这样一来，网站就不用操心怎么保存我们的个人信息了，那些小Cookie也可以退休咯。
localStorage的强大功能
HTML5给我们带来了个新的本地存储功能，不用老是向服务器发送资料了。因为它可以帮我们在网上永久保存信息！而且还可以存储很多东西，容量高达4MB，简直是无限存储用户资料！
//添加key-value 数据到 sessionStorage
localStorage.setItem("demokey", "http://www.shiyanlou.com");
//通过key来获取value
var dt = localStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//localStorage.clear();
alert(localStorage.length);
操作localStorage的便捷方法
这个玩意儿就是LocalStorage！一共四个方法就能轻松掌控本地储存。用起来存取删都超方便的，能让你快速打造Web应用，提高用户满意度~
你们知道SessionStorage跟LocalStorage差在哪儿吗？
HTML5还有个不用存电脑里面的小助手，叫做sessionStorage哈。记住，这个只能保存在当前使用的网页里换个地方看或关闭，里面的信息就全没了。就像没设期限的Cookie一样。
sessionStorage的操作方法
//添加key-value 数据到 sessionStorage
sessionStorage.setItem("demokey", "http://blog.itjeek.com");
//通过key来获取value
var dt = sessionStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//sessionStorage.clear();
alert(sessionStorage.length);
SessionStorage真的很实用！它可以帮助我们管理好需要用在会话里面的信息。而最常用的就是那几个函数，例如setItem、getItem、removeItem还有clear等等，这些小技巧能让用户觉得整个会话体验棒棒哒！
HTML5本地数据库的强大功能
localStorage和sessionStorage虽然好用，但平时存储小数据就够了。不过，对于稍微复杂点的web应用，HTML5又来了个新功能——也就是支持在浏览器上搭建本地数据库！这个数据库能用JavaScriptAPI控制，甚至还能玩转SQL操作，这样我们做离线web应用也就更轻松了。
使用本地数据库的步骤
var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });
HTML5的本地数据库太好用了！只要先打开或者新建个数据库，然后设置下transaction就可以开始玩转SQL操作。这样不仅处理速度快，还能保证数据的同步和安全性哟~
总结与展望
Web应用存储技术更新！从用了多年的Cookie跃升到了HTML5本地存储，使用起来更舒服了，开发者也更加自由发挥了。说说看，对于这些新的东西是否已经激动不已了？想想未来的Web应用，你有没有什么大胆的想法？赶紧来评论区分享下你的观点，别忘了给这篇文章点赞
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
评论0