标签：否则 elements 取数据 local button 保存 信息 ack typeof
客户端存储数据的两个对象为：
两个对象在使用方式没有任何区别，唯一的不同点蚀储存数据 的有效时间
①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(); } }
标签：否则 elements 取数据 local button 保存 信息 ack typeof
原文地址：http://www.cnblogs.com/ljr001/p/7537829.html
