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="新增网站" 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();

    }

}

秒客网

HTML5新增web存储方式

相关文章