在HTML5，除去那个火热的canvas，还有一个很牛的东西叫客户端本地存储WebStorage。以前，想记录点什么就在用户端用Cookies，比如用户名啥的。但后来发现Cookies也有毛病，比如大小有限制、占带宽、操作麻烦等等。为了解决这个问题，HTML5就搞出了一个新的本地存数据的办法：WebStorage。WebStorage分两种：sessionstorage和localstorage，看情况用哪种。
1.sessionstorage：临时存储用户数据
说起SessionStorage，就是把东西存到那个会话对象里头，这个会话表示你在网上逛的时候，就像是从启动网站到退出的时长。在这期间，会话对象能帮你保存各种数据，让你用起来更舒服呗。跟Cookie比起来，SessionStorage的数据就在你电脑上，省了不少网络流量，而且操作也简单多了。
用着用着，我发现sessionstorage挺好用的，特别是存那些暂时的数据，比如你在网页上的操作，像你喜欢看啥之类的。这些东西反正也不用留太久，只要你在网页上的时候能看到就行了。这样一来，网站就能更好地处理这些临时数据，让你用得更舒服！
2.localstorage：永久存储客户端数据
跟sessionstorage不一样，localstorage是把你的数据藏在自己电脑里头（硬盘上），就算关掉浏览器，数据还是不会丢！这样就可以让你的数据留得更久，下次再开网页的时候，那些数据还能帮到你。这样访问起来也方便多了，不用担心数据丢了。
我发现localstorage在编程里用得很多，比如网站可以用它来存咱们用户的好多个人资料啊、购物车啊还有喜好之类的东西，这样就不用每次都重新登录或者输入那么麻烦了，还能让网站的功能多样化！
3.WebStorage与Cookies的对比
科普一下WebStorage和Cookies，就会发现WebStorage太厉害了！它不受4kb大小限制，能存好多东西；还不用每请求就发一次，省网速呢；最重要的是，用起来比Cookies方便多，简直是小白福音！
H5表格提交
WebStorage这个好东西让我们用浏览器玩儿Web应用变得方便多！它能帮我们更好地管理和使用用户数据，提升用户体验。在做实际项目时，我会优先考虑用WebStorage来保存客户端数据，不光是因为它快，还因为它简单好用。
4.使用WebStorage的注意事项
虽然网页储存（WebStorage）方便快捷，但是也有几个小问题要留意。首先，因为它把数据存到你自己电脑上了，所以有些担心是正常的，比如隐私保护啥的，特别是涉及到敏感信息的时候。再者，不同的浏览器对WebStorage的支持程度可能不太一样，所以开发的时候得考虑到这个问题。最后，别忘了定期清理那些用不着的数据，这样才能让WebStorage更好地为你服务！
我做项目的时候，会根据需求和特点来选是用SESSIONSTORAGE好还是用LOCALSTORAGE更靠谱儿。这是针对具体问题来看如何搞定数据存储的窍门~能把这些好好利用起来，就能给大家带来更棒的上网体验，让网站变得更快更强！
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}
5.WebStorage在前端开发中的应用
WebStorage在网页开发中有很多用处，比如说它能帮我们存下用户数据，比如登录情况，看过啥宝贝儿，购物车里有啥好东西啦等等，这样就能让用户更好地使用Web应用了，体验感也会上去哒。而且，WebStorage还能缓存一些网站上的图片啊视频什么的，这样就不用每次都要从网上载下来，既省时间又省流量，网页打开速度也快多了。
我平时就用WebStorage做各种事情，比如让网站记住你的个人喜好，或者保留你常用的搜索词之类的。好好利用这玩意儿，能提高用户体验，还能让我们省事儿不少！
6.WebStorage的未来发展
随着网络科技的日新月异，我们的网上存储器也在跟着进步。未来，我觉得它会在网页设计里变得更有分量，给我们带来更大的方便。比如说，可能还会有更高级的网络存储器系统，更严谨的数据保管，还有更快的数据整理工具！
对于我们这些喜欢搞技术的人来说，得时刻关注WebStorage新技术和新用法。这样才能跟上时代步伐，迎接未来更大挑战。我真心希望WebStorage能给web开发带来更多新鲜玩意儿，让大家用起来更方便，享受更美好的体验。
7.总结
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}
研究过HTML5里的WebStorage后，发现它真的很强大！对于我们前端来说，不仅方便存储数据，还能让用户用得顺手。以后干活儿，要多学学多用用这个东西，提高自己，才能做出更好的东西给大家。
最终，我想问问你们：你们用上WebStorage了吗？对于这个新功能，你们觉得怎么样？别害羞，快到评论区说说~
评论0