客户端存储数据的两个对象为：
两个对象在使用方式没有任何区别，唯一的不同点蚀储存数据 的有效时间
①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=;>
<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=; 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+)+"</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=;
var str = localStorage.sites;
var arr = JSON.parse(str); for(var i=;i<checkboxs.length;i++){
if(checkboxs[i].checked){ var index =parseInt(checkboxs[i].value)-count;
arr.splice(index,);
count++;
}
}
localStorage.sites =JSON.stringify(arr);
if(count==){
alert("请至少选择一项！！")
}else{
alert("删除成功！共删除"+count+"条数据！");
showAllSite();
} }