整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
章不是简单的的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/
ocalstorage本地存储基本用法
如何创建和访问 localStorage
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
上面就创建了一个localStorage。
我们再来做一个刷新页面，增加访问次数的功能！很简单，代码如下：
<script type="text/javascript">if (localStorage.pagecount)
?{
?localStorage.pagecount=Number(localStorage.pagecount) +1;
?}else
?{
?localStorage.pagecount=1;
?}document.write("Visits "+ localStorage.pagecount + " time(s).");</script>
上面是用点的方式进行操作，localStorage还有存储API,具体如下：
调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
调用getItem()方法，将名字传递出去，可以获取对应的值
调用removeItem()方法，名称作为参数，可以删除对应的数据
调用clear()方法，可以删除所有存储的数据
使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字
用法如下：
localStorage.setItem("name", "haorooms"); ? ?// 以"name"为名字存储一个字符串localStorage.getItem("name"); ? ? ? ? ? ?// 获取"name"的值// 枚举所有存储的名字/值对for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值对总数
? ?var name=localStorage.key(i); ? ? ? ? ? ?// 获取第i对的名字
? ?var value=localStorage.getItem(name); ? ? ? ?// 获取该对的值}localStorage.removeItem("name"); ? ? ? ?// 删除"name"项localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部删除
sessionStorage和Localstorage区别
sessionStorage用法和Localstorage用法一样，区别就是，sessionStorage是会话存储，关闭浏览器，存储内容就会被清除。
低版本浏览器存储兼容方案
IE User Data
微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。
userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。
iLocalStorage插件
由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：
getItem: 获取属性setItem: 设置属性removeItem: 删除属性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');
插件代码
/**
* LocalStorage 本地存储兼容函数
* getItem: 获取属性
* setItem: 设置属性
* removeItem: 删除属性
*
*
* @example
*
? ?iLocalStorage.setItem('key', 'value');
? ?console.log(iLocalStorage.getItem('key'));
? ?iLocalStorage.removeItem('key');
*
*/(function(window, document){
? ?// 1. IE7下的UserData对象
? ?var UserData={
? ? ? ?userData: null,
? ? ? ?name: location.href,
? ? ? ?init: function(){
? ? ? ? ? ?// IE7下的初始化
? ? ? ? ? ?if(!UserData.userData){
? ? ? ? ? ? ? ?try{
? ? ? ? ? ? ? ? ? ?UserData.userData=document.createElement("INPUT");
? ? ? ? ? ? ? ? ? ?UserData.userData.type="hidden";
? ? ? ? ? ? ? ? ? ?UserData.userData.style.display="none";
? ? ? ? ? ? ? ? ? ?UserData.userData.addBehavior("#default#userData");
? ? ? ? ? ? ? ? ? ?document.body.appendChild(UserData.userData);
? ? ? ? ? ? ? ? ? ?var expires=new Date();
? ? ? ? ? ? ? ? ? ?expires.setDate(expires.getDate() + 365);
? ? ? ? ? ? ? ? ? ?UserData.userData.expires=expires.toUTCString();
? ? ? ? ? ? ? ?} catch(e){
? ? ? ? ? ? ? ? ? ?return false;
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?return true;
? ? ? ?},
? ? ? ?setItem: function(key, value){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?UserData.userData.setAttribute(key, value);
? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?getItem: function(key){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?return UserData.userData.getAttribute(key);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?removeItem: function(key){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?UserData.userData.removeAttribute(key);
? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);
? ? ? ? ? ?}
? ? ? ?}
? ?};
? ?// 2. 兼容只支持globalStorage的浏览器
? ?// 使用： var storage=getLocalStorage();
? ?function getLocalStorage(){
? ? ? ?if(typeof localStorage=="object"){
? ? ? ? ? ?return localStorage;
? ? ? ?} else if(typeof globalStorage=="object"){
? ? ? ? ? ?return globalStorage[location.href];
? ? ? ?} else if(typeof userData=="object"){
? ? ? ? ? ?return globalStorage[location.href];
? ? ? ?} else{
? ? ? ? ? ?throw new Error("不支持本地存储");
? ? ? ?}
? ?}
? ?var storage=getLocalStorage();
? ?function iLocalStorage(){
? ?}
? ?// 高级浏览器的LocalStorage对象
? ?iLocalStorage.prototype={
? ? ? ?setItem: function(key, value){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?UserData.setItem(key, value);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?storage.setItem(key, value);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?getItem: function(key){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?return UserData.getItem(key);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?return storage.getItem(key);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?removeItem: function(key){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?UserData.removeItem(key);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?storage.removeItem(key);
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?if (typeof module=='object') {
? ? ? ?module.exports=new iLocalStorage();
? ?}else {
? ? ? ?window.iLocalStorage=new iLocalStorage();
? ?}})(window, document);
其他插件
localForage：https://github.com/mozilla/localForage
store.js：https://github.com/marcuswestin/store.js
------------------
切图网（qietu.com）是一家专门从事html5前端开发的服务机构，长期致力于提供高品质的psd转html5、响应式切图、webapp切图，h5切图等web前端开发服务。
专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）
TML5引入了一种新的Web存储机制，它允许我们在浏览器中持久保存数据，而无需依赖于传统的Cookie或服务器端存储。这种新方法提供了更简单、更高效的方式来处理客户端数据，并且在离线状态下也能正常工作。以下是一些常用的HTML5 Web存储技术及其代码示例：
1. 本地存储（LocalStorage）
本地存储允许我们在浏览器中存储键值对数据，并且这些数据会一直保留，直到我们显式地删除它们。以下是一个使用本地存储保存用户偏好设置的示例代码：
```html
<script>
// 存储用户偏好设置
localStorage.setItem('theme', 'dark');
// 获取用户偏好设置
var theme=localStorage.getItem('theme');
</script>```
2. 会话存储（SessionStorage）
会话存储与本地存储类似，但是存储的数据只在会话期间有效，一旦会话结束或浏览器关闭，存储的数据就会被清除。以下是一个使用会话存储保存用户登录状态的示例代码：
```html
<script>
// 存储用户登录状态
sessionStorage.setItem('loggedIn', 'true');
// 检查用户登录状态
var loggedIn=sessionStorage.getItem('loggedIn');
</script>```
3. 离线存储（Offline Storage）
离线存储允许我们在浏览器中缓存网页的资源，使得用户在离线状态下仍然可以访问和浏览已缓存的页面。以下是一个使用离线存储缓存网页资源的示例代码：
```html
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 网页内容 -->
</body>
</html>```
4. IndexedDB
IndexedDB是一个基于键值对的数据库系统，它允许我们在浏览器中存储和检索结构化数据。以下是一个使用IndexedDB存储用户数据的示例代码：
```html
<script>
// 打开数据库
var request=window.indexedDB.open('myDatabase', 1);
// 创建对象存储空间
request.onupgradeneeded=function(event) {
var db=event.target.result;
var objectStore=db.createObjectStore('users', { keyPath: 'id' });
};// 存储用户数据
request.onsuccess=function(event) {
var db=event.target.result;
var transaction=db.transaction('users', 'readwrite');
var objectStore=transaction.objectStore('users');
var user={ id: 1, name: 'John Doe', email: 'john@example.com' };
var request=objectStore.add(user);
};
</script>```
通过使用这些HTML5 Web存储技术，我们可以更灵活地处理客户端数据，并且提供更好的用户体验。无论是存储用户偏好设置、管理用户登录状态，还是实现离线访问，这些新方法都为我们提供了更多的选择和便利。记住，在使用HTML5 Web存储时，要根据需求选择适当的技术，并合理管理存储的数据。
我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！
*请认真填写需求信息，我们会在24小时内与您取得联系。
