文章不是简单的的Ctrl C与V，而是一个字一个标点符号慢慢写出来的。我认为这才是是对读者的负责，本教程由技术爱好者成笑笑(博客：http://www.chengxiaoxiao.com/)写作完成。如有转载，请声明出处。
介绍
我们把数据存储在浏览器，一直使用的Cookie，但其实Cookie是有很多数量和大小的限制的。现在我们不用考虑这些了，我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。
背景
虽然Web存储已经有了自己的规范（(http://dev.w3.org/html5/webstorage/) ），并且也在独立于Html5进行开发。但Web存储通常是集中在HTML5技术之下的。
不像cookie一样，数据存储在Web Storage意味着客户端不在请求服务器了。通常情况下，在浏览器和服务器来回的传递数据用的是HTTP request，这限制了如果要在客户端存储大量数据，必须使用Cookie，但是如果服务器端用不到Cookie。而在请求时，也会把Cookie发送到服务器，浪费了大量带宽。并且浏览器强制限制了Cookie的大小和数量，在一个相同的域名上，你可以存储不多于50个cookie和4KB的大小。
使用Web Stroage就会解决以上两个问题。首先，它不会离开浏览器，其次，也允许存储更多更大的数据。W3C推荐限制在5MB之内，但是如果用户需要更多的存储，是可以在浏览器中进行设置的。当前一般浏览器会允2MB的容量。
还有另外一种存储方式就是FileSystem API (www.w3.org/TR/file-system-api/)。简单来水就是使用此api可以进行文件的读写操作，目前来说谷歌浏览器是当前兼容此功能的。
当然如果你对数据库感兴趣的话，你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/)，这个api提供了可以存储大量存储内容数据的能力。目前为止，只有火狐、谷歌、IE10以上支持。
使用Web Storage
Web Storage主要包括本地存储和基于Session的存储。它是在域名之上的。如果你不删除这些存储，它是会一直存在的。
如果你想添加和修改数据，使用下面的Api：
localStorage.setItem(“mydata”,”this is a data”);
获取数据：var dat = localStorage.getItem(“mydata”);
当然下面的形式也可以使用的：
第一种：
var data = localStorage["myData"];
localStorage["mydata"] = “this is a data”;
第二种：
var data = localStorage.mydata;
localStorage.mydata = “this is a data”;
删除数据:
删除指定名称的数据:localStorage.removeItem(‘mydata’);
删除所有Web Storage中的数据:localStorage.clear();
可以存储的数据类型
Web Storage只能够存取字符串数据，所以如果你想存取更多的数据的话，你可以使用json对象，把它转换为json字符串。
var data = {“key”:”value”,”key1″:”value1″};
localStorage.setItem(“mydata”,JSON.stringify(data));
当你需要读取数据的时候可以把json解析成对象：
var data = JSON.parse(localStorage.mydata);
WebStorage的数量:localStorage.length.
获取索引的键：
var key =localStorage.key(0);//获取索引为0的键
var data = localStoragegetItem(key);获取值
通过循环我们就可以查找到存储的所有键值对了。
sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于会话级别的。
微信号：net4k8k（做(4k+8k)+月薪的程序员）
微信名称：net知识分享
介绍：主要以发布和分享.Net和安卓文章为主，争做全栈开发工程师，爱学习，爱挑战，爱编程。
打造C#入门教程。总结自己已经习得的技术体系。分享到网络。为中国的软件复兴贡献自己的一份力。
如有不恰当之处，还请指正。
作者：成笑笑
职业：应届毕业生，找工作中。
本人联系方式：cxx@chengxiaoxiao.com
GitHub：https://github.com/shellcheng
My CnBlogs:http://www.cnblogs.com/happpytoo/
网友评论