认识H5中Web Storage

来源：互联网发布：苏州爱知科技底薪多少编辑：程序博客网时间：2024/06/08 04:32

认识h5中Web Storage

1. Cookie和Web Storage

h5中Web Storage翻译理解就是“数据存储”，这是h5新增的重要功能之一，它可以快速方便的存储和读取数据。

h5本地存储前身是Cookie，使用Cookie对象存储数据是一种简单而且兼容最佳的方案，但是它有一下的缺点：

大小受限制，Cookies大小被限制在4KB。
Cookie会随着事物一块发送，浪费带宽。
Cookie所有的信息都要被放到一个长字符串中，操作比较麻烦。
Cookie在相同的站点与多事务处理保持联系不容易。

Web Storage的优点：

存储空间更大，默认情况下，Web Storage大小可以存储5MB，不同浏览器支持的数据大小不同。
Web Storage存储的内容不会发送到服务器，它的数据仅保存在本地。
Web Storage提供了更丰富易用的接口，操作数据更方便。
Web Storage拥有独立的空间，每个域包括子域都有独立的存储空间，不会造成数据混乱。

Web Storage的缺点：

浏览器给每个域分配了独立的空间，但是浏览器却不会检查脚本所在的域是否相同。
Web Storage的数据永远不会过期，极易造成隐私泄露。

2. localStorage对象

localStorage对象常用的方法：

setItem(key,value) ，保存数据，需要2个参数：key，value都是字符串类型。getItem(key) ，读取数据，需要的参数：key，setItem方法中保存的，返回指定key的存储内容，不存在则返回null。removeItem(key) ，删除数据，需要的参数：key。clear() ，清空所有的数据。key(n) ，获取指定下标的键的名称。length ，获得当前localStorage对象中的数目。

localStorage的存储周期是存在于浏览器的缓存中的，也就是说下次用同一个浏览器打开页面，存储的内容还在。

localStorage对象使用示例：

        //判断浏览器是否支持localStorage        function getLocalStorage(){            try{                if(!! window.localStorage ){                    return window.localStorage;                }            }catch(e){                return undefined;            }        }        //获取localStorage对象        var localStorage = getLocalStorage();         //存储数据（两种方法）        localStorage.setItem("name","Cynthia");   //方法一        localStorage.setItem("age","21");        localStorage.hobby = "sing";          //方法二        //获取保存的数据（两种方法）        console.log(localStorage.name + " 今年" + localStorage.age + ",她喜欢 " + localStorage.hobby);         console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + ",她喜欢 "+ localStorage.getItem("hobby"));        //调用key()方法获取指定下标的名称的值        var value0 =localStorage.key(0);         console.log(value0);        //删除某个指定的数据        localStorage.removeItem("hobby");         console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + " ,她喜欢 "+ localStorage.getItem("hobby"));        //清空当前所有保存的数据        localStorage.clear();        console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + " ,她喜欢 "+ localStorage.getItem("hobby"));

3. JSON对象

JSON： javaScript Object Notation的缩写，是一种将对象与字符串可以相互表示的数据转换标准，也一直是通过HTTP将对象从浏览器传送到服务器的一种常用格式。

最常用的方法：

JSON.parse(data) ，这个方法返回一个装载data数据的JSON的对象，参数data表示从Web Storage相关对象中所获取的数据。JSON.stringify(obj) ，这个方法返回一个由实体对象转换成JSON格式的文本数据集，参数obj表示一个任意的实体对象。

4. sessionStorage对象

sessionStorage对象常用属性、方法、事件：与localStorage对象都一样。

sessionStorage的存储周期是当前页面，也就是说，关闭了页面之后就不存在了。

localStorage对象和sessionStorage对象对比使用示例：

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>localStorage和sessionStorage</title>    </head>    <body>    用户名：<input type="text" name="user" id="user" size="24" maxlength="12">    密  码：<input type="password" name="pass" id="pass" size="24" maxlength="16">    <script>         //判断浏览器是否支持localStorage        function getLocalStorage(){            try{                if(!! window.localStorage ){                    return window.localStorage;                }            }catch(e){                return undefined;            }        }        //判断浏览器是否支持seesionStorage        function getSessionStorage(){            try{                if(!! window.sessionStorage){                    return window.sessionStorage;                }            }catch(e){                return undefined;            }        }        var sessionStorage = getSessionStorage(); //获取sessionStorage对象        var localStorage = getLocalStorage();        var oUser = document.getElementById('user'); //获取同户名对象        var oPass = document.getElementById('pass'); //获取密码对象        oUser.value = localStorage.getItem('userName');        oPass.value = sessionStorage.getItem('userPass');        oUser.onkeyup = function(){            localStorage.setItem("userName",this.value);        }        oPass.onkeyup = function(){            sessionStorage.setItem("userPass",this.value);        }    </script>    </body>    </html>

5. 实例

（1）使用localStorage对象实现：统计访问某个页面的总次数

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>LocalStrage3</title>    <style>    #showNumber{        position: absolute;        margin-top: 50px;        margin-left: 250px;        font-size: 18px;    }    </style>    </head>    <body>    <span id="showNumber">        访问人数显示    </span>    <script>        //判断浏览器是否支持localStorage        function getLocalStorage(){            try{                if(!! window.localStorage ){                    return window.localStorage;                }            }catch(e){                return undefined;            }        }        //统计访问当前页面的人数        function ShowVisitedNumber(){            var localStorage1 = getLocalStorage();            if(localStorage1.getItem("countNumber")){ //判断countNumber属性值是否为空，不为空则将当前访问的次数加1，否则置为1                localStorage1.setItem("countNumber",Number(localStorage1.getItem("countNumber")) + 1 );            }else{                localStorage1.setItem("countNumber",1);            }            document.getElementById("showNumber").innerHTML = "当前页面被访问的次数为："+localStorage1.getItem("countNumber");        }         //及时更新页面被访问的次数        function storageHandler(e){            if(!e){                e=window.event;            }            document.getElementById("showNumber").innerHTML = "存储发生了变化：<b>"+e.key+"</b>键改变了。旧值：<b>"+e.oldValue+            "</b>被改变为新值<b>"+e.newValue+"</b><br/><br/>发生改变的网址为：<b>"+e.url+"</b>";        }        if(window.addEventListener){            window.addEventListener("storage",storageHandler,false);        }else{            window.attachEvent("onstorage",storageHandler);        }        window.onload = ShowVisitedNumber;    </script>    </body>    </html>

（2）使用JSON和localStorage对象完成：联系人的添加和检索的操作

    <!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>联系人数据的保存和读取</title>    </head>    <body>    <table border="0" cellspacing="0" cellpadding="0" class="table1" align="">        <thead>            <tr>                <td>联系人姓名</td>                <td>手机号码</td>                <td>所属群组</td>            </tr>        </thead>        <tbody id="contactListBody">        </tbody>    </table>    <button id="addPerson" onclick="Add()">添加联系人</button>    <button id="searchPerson" onclick="Search()">检索联系人</button>    <div id="addInfo" style="display: none;">        <table>            <tr>                <td height="30">姓名：</td>                <td>                    <input type="text" id="MoblieName">                </td>            </tr>            <tr>                 <td height="30">电话：</td>                <td>                    <input type="text" id="MobliePhone">                </td>            </tr>            <tr>                <td height="30">分组：</td>                <td>                    <select name="" id="MoblieGroup">                        <option value="默认">默认</option>                        <option value="家人">家人</option>                        <option value="同学">同学</option>                        <option value="朋友"></option>                    </select>                </td>            </tr>            <tr>                <td colspan="2" height="30">                    <button onclick="AddMobilePerson()">确认添加</button>                </td>            </tr>    </div>    <div id="searchInfo"  style="display: none">        输入联系电话：<input type="text" id="searchByMobilePhone" placeholder="正确的联系电话">        <button onclick="SearchMobliePerson()">查找</button>        <span id="searchContent"></span>    </div>    </body>    <script>    window.onload = Init;    function Init(){            //初始化联系人列表        localStorage.clear();   //清空localStorage对象中的内容        var data1 = new Object; //创建一个Object对象        data1.personName = "Cynthia";        data1.personPhone = "15829104582";        data1.personGroup = "家人";        localStorage.setItem(data1.personPhone,JSON.stringify(data1)); //保存数据，JSON对象的stringify（）返回文本数据集        GetPersonList(); //加载显示联系人列表    }    function GetPersonList(){ //获取存储在locaStorage对象中的数据列表        var strHTML = "<tbody>";        for(var i=0; i<localStorage.length; i++){            var datakey = localStorage.key(i);            //调用parse()方法获取JSON对象,将所有读取的数据保存到变量strHTML中            var data = JSON.parse(localStorage.getItem(datakey));             strHTML += "<tr>";            strHTML += "<td style=\"width:200px; \" >" + data.personName + "</td>";            strHTML += "<td style=\"width:180px; \" >" + data.personPhone + "</td>";            strHTML += "<td>" + data.personGroup + "</td>";            strHTML += "</tr>";        }        strHTML += "</tbody>";        document.getElementById('contactListBody').innerHTML = strHTML;    }    function Add(){    //添加联系人，出现添加的联系人信息填写        document.getElementById('addInfo').style.display = "inline";        document.getElementById('searchInfo').style.display = "none";    }     function Search(){ //搜索联系人，出现搜索的结果        document.getElementById('searchInfo').style.display = "inline";        document.getElementById('addInfo').style.display = "none";    }    function AddMobilePerson(){  //确认添加，将信息添加到列表        var data = new Object;   //创建一个js对象，用于存放当前从表单获得的数据        data.personName = document.getElementById('MoblieName').value;        data.personPhone = document.getElementById('MobliePhone').value;        data.personGroup = document.getElementById('MoblieGroup').value;        var str = JSON.stringify(data); //把JSON对象存放到localStorage上，key为用户输入的用户名，vlaue为这个JSON字符串        localStorage.setItem(data.personPhone,str);        GetPersonList();        document.getElementById('MoblieName').value = "";        document.getElementById('MobliePhone').value = "";        document.getElementById('MoblieGroup').selectedIndex = 0;    }    function SearchMobliePerson(){        var searchphone = document.getElementById('searchByMobilePhone').value;        var searchStr = localStorage.getItem(searchphone);        if(searchStr == null){            document.getElementById('searchContent').innerHTML = "<font color=\"red\">很抱歉,没有找到您要的联系人。</font>";        }else{            var searchData = JSON.parse(searchStr);            var searchResult = "<br/>联系人姓名; " + searchData.personName + "<br/>联系人电话： " + searchData.personPhone             + "<br/>所属分组： " + searchData.personGroup;            document.getElementById('searchContent').innerHTML = searchResult;        }    }    </script>    </html>

0 0