客户端存储数据的两个对象为：
两个对象在使用方式没有任何区别，唯一的不同点蚀储存数据 的有效时间
????????????①localStorage - 没有时间限制的数据存储 ??除非手动删除，否则数据将一直保存在本地文件；
????????????②sessionStorage - 针对一个 session 的数据存储 ?当浏览器关闭时，sessionStorage就被清空；
????????????
????????????在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
??????????????[Storage的数据存储]
????????????1、Storage可以像普通对象一样，使用.追加或者读取最新的数据。
????????????eg:localStorage.username="张三";
????????????2、常用的函数
??????????????????????????????????保存数据：localStorage.setItem(key,value);
??????????????????????????????????读取数据：localStorage.getItem(key);
??????????????????????????????????删除单个数据：localStorage.removeItem(key);
??????????????????????????????????删除所有数据：localStorage.clear();
??????????????????????????????????得到某个索引的key：localStorage.key(index);
检测浏览器是否支持web存储
if(typeof(Storage)!=="undefined"){ ????????????alert("支持") ； ??????????????????????} else { ??????????alert("不支持") ???????????????????????}怎样新增一条数据？
1、 取到录入的各种信息
2、 把这些信息封装成一个对象。
3、 从本地文件中，读取出存储数据的数组字符串。并将字符串，转回数组格式。
如果本地文件中，没有这个数组，就新建一个数组存放。
4、 数组中，push进一个新组建的对象。
5、 将新数组，重新转为字符串。把字符串丢回文件。
6、 重新读取一边文件，重新加载表格。
怎样新增一条数据？
1、 从文件中，读取出字符串，转回数组格式。
2、 判断需要删除的是第几条数据。
3、 删除掉数组对应的数据、splice
4、 把新数组重新转为字符串，放回文件。
5、 重新读取一边文件，重新加载表格。
例如：
???????<h4>新增网站</h4> ???????网站名：<input type="text" id="wangzhanming"/><br /> ???????别名： <input type="text" id="bieming"/><br /> ???????网址：<input type="text" id="wangzhi"/><br /> ???????<input type="button" value="新增网站" onclick="addSite()"/><br /> ???????<!--<input type="button" value="新增网站" onclick="showDia()" ?/>--> ???????<h4>网站登录</h4> ???????网站名：<input type="text" id="loginName"/><br /> ???????网址：<input type="text" id="loginPwd"/><br /> ???????<input type="button" value="登录网站" onclick="login()"/><br /> ???????????????<h4>已保存的网站</h4> ???????<input type="button" value="删除网站" onclick="delSite()" /> ???????<input type="text" placeholder="网站名" id="search1"/> ???????<input type="text" placeholder="别名" ?id="search2"/> ???????<input type="text" placeholder="网址" ?id="search3"/> ???????<input type="button" value="查询" onclick="searchSite()" /> ???????????????<table style="border-collapse: collapse;" border=1;> ???????????<thead> ???????????????<th> ???????????????????<input type="checkbox" id="checkAll" onclick="checkAll()" /> ???????????????</th> ???????????????<th>序号</th> ???????????????<th>网站名</th> ???????????????<th>别名</th> ???????????????<th>网址</th> ???????????</thead> ???????????<tbody id="tbody"> ???????????????????????????</tbody> ???????????</table>
/*注册*/function ?addSite(){ ???????var wangzhanming = document.getElementById("wangzhanming").value; ???var bieming = document.getElementById("bieming").value; ???var wangzhi = document.getElementById("wangzhi").value; ???var site = { ???????wangzhanming : wangzhanming, ???????bieming : bieming, ???????wangzhi : wangzhi ???} ???if(localStorage.sites == undefined){ ???????var arr = []; ???}else{ ???????var str = localStorage.sites; ???????var arr = JSON.parse(str); ???} ???for(var i=0; i<arr.length; i++){ ???????if(arr[i].wangzhanming == wangzhanming){ ???????????alert("网站名已注册！请更换网站名！");return; ???????} ???} ???arr.push(site); ???var str = JSON.stringify(arr); ???localStorage.sites = str; ???????alert("新增成功！！"); ???showAllSite();}/** * 显示所有的网站列表 ?*/function showAllSite(){ ???if(localStorage.sites == undefined) return; ???var str = localStorage.sites; ???var arr = JSON.parse(str); ???var html = ""; ???arr.forEach(function(item,index){ ???????html += "<tr class=‘tr‘ onclick=‘chooseInput("+index+")‘ondblclick=‘updateSite("+item.index+")‘><td align=‘center‘><input type=‘checkbox‘ value=‘"+index+"‘ class=‘checkbox‘ /></td><td>"+(index+1)+"</td><td>" ???????+item.wangzhanming+"</td><td>"+item.bieming+"</td><td>"+item.wangzhi+"</td></tr>"; ???}); ???????var tbody = document.getElementById("tbody"); ???tbody.innerHTML = html;}window.onload = function(){ ???showAllSite();}/*删除选中的网站*/function delSite(){ ???var checkboxs =document.getElementsByClassName("checkbox"); ???var count=0; ???var str = localStorage.sites; ???????var arr = JSON.parse(str); ???????????for(var i=0;i<checkboxs.length;i++){ ???if(checkboxs[i].checked){ ???????????????????????var index =parseInt(checkboxs[i].value)-count; ???????arr.splice(index,1); ???????count++; ???}} ???localStorage.sites =JSON.stringify(arr); ???if(count==0){ ???????alert("请至少选择一项！！") ???}else{ ???????alert("删除成功！共删除"+count+"条数据！"); ???????showAllSite(); ???} ???}HTML5新增web存储方式
原文地址：http://www.cnblogs.com/ljr001/p/7537829.html