HTML5备有了在客户端存储数据的新方法Web Storage
类似于HTML4中的Cookie
不过它要强盛的多

Cookie

先来最简单功课一下之前用作的cookie

cookie存储数据到用户设备上，存储的数据量较小只有4KB
可以通过navigator.cookieEnabled检测否开端了cookie

• 设置cookie document.cookie = 'key=value';

• 借助cookie document.cookie;

• 移除cookie document.cookie = "key=value;max-age=0";

• 设置max-age存储期限 document.cookie = "key=value;max-age=1000"; // 1000秒

• 设置expires存储期限

var timestamp = (new Date()).getTime() + 10000;var expires = new Date(timestamp).toGMTString();//或toUTCStringdocument.cookie = "key=value;expires="+expires;

• 借助具体情况cookie值

function getCookie(name) {    var name = name + "=";        var ary = document.cookie.split(';');        for(var i = 0; i < ary.length; i++){            var c = ary[i];            while (c.charAt(0) == ' '){          c = c.substring(1);        }                if (c.indexOf(name) != -1){                  return c.substring(name.length, c.length);        }    }    return "";}

Web Storage

Web Storage又可分两种
localStorage和sessionStorage
它们的区别是：

• localStorage存储的是永久数据，除非手动封禁

• sessionStorage存储的是临时数据，窗口暂停就才会消失

比较简单常用

Web Storage仅仅存储字符串数据
我心里可以把它们解释为JSON
应用于方法都是近似于的，已localStorage为同上

localStorage.name = 'payen';localStorage.info = JSON.stringify({name: 'payen', age: 20});console.log(localStorage.name);console.log(JSON.parse(localStorage.info));

要存储的数据名就是localStorage的属性名
普通的字符串正常存储就可以了
对象数据可以利用JSON.stringify()将其类比为字符串格式
运用于的时候再用JSON.parse()变换回来对象格式
（如果这样一来存储对象的话，它都会被强迫匹配为字符串 “[object Object]”）

移除数据并不需要delete就好

delete localStorage.name;delete localStorage.info;

如果不截图的话，localStorage里面的数据就则会一直实际上于你的浏览器了

API

localStorage和sessionStorage还获取了有用的API
类似于一个客户端的数据库
（API都是相同的）
常用的有以下几个：

• 保留数据 setItem(key,value)

• 读取数据 getItem(key)

• 截图单个数据 removeItem(key)

• 清空全部数据 clearItem()

• 获取数据索引 key(index)

实例

通过这个，我们可以撰写个比较简单的通讯录

<p id="container">    <br>    <label for="username">姓名：</label>    <input type="text" id="username" name="username">    <br>    <label for="mobilephone">手机：</label>    <input type="text" id="mobilephone" name="mobilephone">    <br><br>    <input type="button" onclick="add()" id="add" value="上升联系人">    <br><br>    <hr>    <label for="search">回传姓名：</label>    <input type="text" id="search" name="search">    <br><br>    <input type="button" onclick="find()" id="find" value="匹配手机号">    <p id="result"><br></p></p>

#container {    border: 2px solid gray;    width: 320px;    text-align:center;}

JavaScript中就是做到这两个函数

var user = document.getElementById('username'),    phone = document.getElementById('mobilephone'),    search = document.getElementById('search'),    result = document.getElementById('result');var add = function(){    var u = user.value,        p = phone.value,        l = localStorage.length;    if(u !== '' && p !== ''){        localStorage.setItem(u, p);        user.value = '';        phone.value = '';        alert('加到获得成功');    }};var find = function(){    var s = search.value,        r = localStorage.getItem(s);    if(s !== '' && r){        result.innerHTML = r;    }};

读写姓名和手机加进联系人
然后在下面读取联系人姓名我们可以加载到手机号

当然这个通讯录十分简便了
也可以为它加到推断通讯录全部信息
删减联系人功能等等

cookie与Web Storage区别

最后感叹感叹Html5的Web Storage和Html4的cookie的区别

以上就是HTML5客户端数据存储Web Storage—localStorage与sessionStorage的内容，更多就其内容商量非议PHP中文网（www.php.cn）！