HTML5新增web存储方式

客户端存储数据的两个对象为：
两个对象在使用方式没有任何区别，唯一的不同点蚀储存数据 的有效时间
①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="新增网站" οnclick="addSite()"/><br />
        <!--<input type="button" value="新增网站" οnclick="showDia()"  />-->
        <h4>网站登录</h4>
        网站名：<input type="text" id="loginName"/><br />
        网址：<input type="text" id="loginPwd"/><br />
        <input type="button" value="登录网站" οnclick="login()"/><br />
        
        <h4>已保存的网站</h4>
        <input type="button" value="删除网站" οnclick="delSite()" />
        <input type="text" placeholder="网站名" id="search1"/>
        <input type="text" placeholder="别名"  id="search2"/>
        <input type="text" placeholder="网址"  id="search3"/>
        <input type="button" value="查询" οnclick="searchSite()" />
        
        <table style="border-collapse: collapse;" border=1;>
            <thead>
                <th>
                    <input type="checkbox" id="checkAll" οnclick="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' οnclick='chooseInput("+index+")'οndblclick='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();
    }
    
}

 

转载于:https://www.cnblogs.com/ljr001/p/7537829.html