一、web存储方式：
 
浏览器（客户端）访问服务器端的时候，携带的数据，之前这些数据保存在cookie中，但是cookie保存的数据大小有限
 
html5的web存储
 
html5的web存储分为：
 
localStorage： 
 
sessionStorage：
 
他们的区别在于：localStorage 存储在客户端，大小没有限制，时间也没有限制
 
sessionStorage: 在当前访问的页面，一旦关闭这个页面，下次在访问的时候就会释放变量
 
唯一的区别就在于，sessionStorage 保存的是当前访问的页面
 
1、localStorage 和 sessionStorage把数据保存到本地,下次直接可以访问到跟php中的session相似
 
3种设置本地存储的方法：
 
　　localStorage.t1 = ‘php’;
 
　　localStorage[‘t1’] = ‘cache’;
 
　　localStorage.setItem(‘t1’,’php’);
 
3种访问本地存储的方法：
 
　　localStorage.t1;
 
　　localStorage[‘t1’];
 
　　localStorage.getItem(‘t1’);
 
   localStorage.getItem(localStorage.key(0))
 
删除存储内容：
 
　　localStorage.removeItem();  //清除
 
　　localStorage.clear()            //清除所有
 
　　localStorage.length        //获得有多少键
 
　         　localStorage.key() //获得存储的键对应的内容,获得元素的下标,下标从0开始
 
            localStorage.getItem()  通过下标获得对应的值

常见的浏览器端存储技术有：
cookie    sessionStorage    localStorage     userData     indexDB
服务器端存储技术：
session
一、HTML5 web存储（WebStorage）
HTML5 可以在本地存储用户的浏览数据，不存储在服务器上，可以存储大量数据而不影响网站性能。这些数据只用于用户请求网站数据。
数据以键/值对存在。存储一些不需要和服务器进行交互的数据
客户端存储临时数据的两种对象: localStorage   sessionStorage
1、localStorage:没有时间限制的存储（关闭浏览器，再次打开浏览器，存储的数据依然存在）
2、sessionStorage:针对一个session的数据存储（关闭浏览器窗口，存储的数据清空，即关闭窗口再次进浏览器数据清空了），前进、后退、刷新数据依然存在
3、它们均只能存储字符串类型的对象
4、都是用来存储客户端临时信息的对象
5、不同浏览器无法共享sessionStorage、localStorage中的信息；
相同浏览器不同页面可以共享localStorage中的信息（同协议，同域名，同端口）；但是sessionStorage不行
 localStorage   sessionStorage的用法相同
 1、存储变量
  sessionStorage.setItem('key','value');      //key-是要存储的变量名，value-是变量的值
   localStorage.setItem('key','item');
  2、获取变量的值
  sessionStorage.getItem('key');              //key-是存储的变量名
   localStorage.getItem('key');
   3、删除指定变量
   sessionStorage.removeItem('key');
    localStorage.remove('key');
   4、删除本地存储的所有信息
    sessionStorage.clear();
    localStorage.clear();
   5、获取当前存储的键值对数量
   localStorage.length;
   sessionStorage.length;
注意：localStorage 存储的值只能是字符串 形式。当存储的数据为引用对象，会默认调用对象的toString方法，转为字符串在存储。在存储数组的时候，存储的数据项以“,”隔开，解析的时候需要分解为数组在操作。对于对象，需要JSON.stringify转化在存储，获取数据后用JSON.parse转为对象
1、数组：
localStorage.setItem('testArr',[1,2,3]);
console.log('数组的值：'，localStorage.getItem('testArr'));
//获取数组的第一项的值
console.log('数组的第一项的值:',localStorage.getItem('testArr').split(',')[0]);
 显示结果：
数组的值：1,2,3,4
数组的第一项的值：1
2、对象

var data = {
      'a':2,
      'b':3
};

var dataStr = JSON.stringify(data);
//直接存储对象
localStorage.setItem('testObj',data);
console.log('直接存储对象：'，localStorage.getItem('testObj'));
//存储转化后的变量
localStorage.setItem('test_obj',dataStr);
console.log('转化后存储对象：'，localStorage.getItem('test_obj'));
//重新解析对象
var data = JSOPN.parse(localStorage.getItem('test_obj');
console.log('重新解析对象：',data);

显示结果：
显示结果：
直接存储对象：[object object]
转化后存储对象：{"a":2,"b":3}
重新解析对象：object{a:2,b:3}
二、cookie存储
在H5之前，cookie是主要的存储方式，cookie的存储一般限制在4KB左右，他的主要用途是保存登录信息，可以设置存储的有效期。cookie的生命周期是根据设置的expire时间来控制的。

需要自己写操作函数实现操作：
//设置cookie，name-存Cookie的变量名，value-变量的值，days-有效期
function setCookie(name, value, days) {
    days = days || 30;           //没有设置有效期，默认有效期是30天
    var exp = new Date();        //获取当前日期
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //设置过期日期
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
//获取cookie
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;

}
//删除cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
}
 三、对三者的性能比较


 1、 cookie:
 
数据生命期：可设置失效时间，默认是关闭浏览器后失效
 
存放数据大小：一般是4KB左右
 
与服务器端通信：每次都会携带在HTTP请求头里面，如果使用Cookie保存过多数据会带来性能问题
 
易用性：需要自己封装，源生的Cookie接口不友好


 

 2、sessionStorage
 
数据生命期：仅在当前会话有效，关闭页面或者浏览器后被清除
 
存放数据大小：一般5MB
 
与服务器端通信：仅在客户端保存（浏览器），不参与和服务器的通信
 
易用性：源生接口可用，也可再次封装，对Object  Array有更好的支持
 

 

 3、localStorage
 
数据生命周期：除非被清除，否则永远保留
 
存放数据大小：一般5MB
 
与服务器端通信：仅在客户端保存（浏览器），不参与和服务器的通信
 
易用性：源生接口可用，也可再次封装，对Object  Array有更好的支持
 

 

 四、应用场景
 
Cookie：保存登录信息
 
localStorage：保存购物车信息，游戏数据
 
sessionStorage:
 

 

 不要在存储系统中存储敏感信息
 

 

 五、离线缓存 application cache
 
应用程序缓存，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中存储数据，可以使用一个描述文件     （manifest file）,列出要下载和缓存的文件，在断网的时候也可以应用
 

Html5 Web的5中离线存储方式之localStorage
 
在HTML5越来越流行的今天，如果你还不知道离线存储，那就说明你落后了很多。 
 HTML5的离线存储方式有多种：Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。 
 Web SQL Database目前虽然还有浏览器支持，是唯一的关系数据库结构的存储，但W3C以及停止对其的维护和发展。我就不多说了。 
 今天我们主要看LocalStorage这种最简单的本地存储方式。
 
先来看一个小例子
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5中LocalStorage的使用</title>
</head>
<body>
    <p>
  你浏览当前页面
  <span id="count">N</span>
  次.
</p>
<script>
    if (!localStorage.pageLoadCount)
        localStorage.pageLoadCount = 0;
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
    document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>
</body>
</html>
 
看看运行效果
 
/**
 * 保存/更新数据
 */
function saveDm(dataModel){
    window.localStorage['DataModel'] = dataModel;
}

/**
 * 获取数据
 */
function getDm(){  
    var value = window.localStorage['DataModel'];
    if(value){
        return value;
    }    
    return '';
}

/**
 * 删除数据
 */
function clearDm(){
    if(window.localStorage['DataModel']){
        delete window.localStorage['DataModel'];        
    }   
}
 
欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！

本来没想看html5，
 
但是毛概课无意把书翻到那一页，无意中看了一点，
 

 
 
 
HTML5 Web 存储
 
 
HTML5 web 存储,一个比cookie更好的本地存储方式。
 

 
 
 
什么是 HTML5 Web 存储?
 
 
 
使用HTML5可以在本地存储用户的浏览数据。
 
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
 
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
 

 
 
 
浏览器支持
 
 
 
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
 
注意: Internet Explorer 7 及更早IE版本不支持web 存储. 

 
 
 
localStorage 和 sessionStorage 
 
 
客户端存储数据的两个对象为：
 
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
 

 
 
localStorage 对象
 localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 
 
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
 
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
 

 
 
 
sessionStorage 对象
 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。 
 
 

 使用方法：
 

 保存数据：sessionStorage.setItem("website", "W3Cfuns.com");
 读取数据：sessionStorage.getItem("website");

 
 
 
开发一个简单的网站列表程序
 
 
网站列表程序实现以下功能：
 
可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；
 图示： 

 
 
代码：
 
js：
 
 
//保存数据  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("添加成功");
}
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var sitename = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的网址是：" + sitename;  
}

 

 
 
html：
 
 
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
    <label for="sitename">网站名(key)：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
    <br/>  
    <label for="siteurl">网 址(value)：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
    <br/>  
    <input type="button" οnclick="save()" value="新增记录"/>  
    <hr/>  
    <label for="search_phone">输入网站名：</label>  
    <input type="text" id="search_site" name="search_site"/>  
    <input type="button" οnclick="find()" value="查找网站"/>  
    <p id="find_result"><br/></p>  
</div>