H5本地存储

Web Storage

Web Storage是什么

在H4中可以使用cookies在客户端保存用户信息，但是cookies存储永久数据存在以下几个问题：

  • 大小：cookies的大小被限制在4kb。
  • 带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。
  • 复杂性：要正确操纵cookies是很难的。

在这种情况下，H5新增了一种在客户端本地保存数据的功能，就是Web Storage。
Web Storage又分为两种：

  • sessionStorage
    将数据保存在sessionStorage中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
  • localStorage
    将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于sessionStorage是临时保存，而localStorage是永久保存。
示例网页：

<body>  
<h1>Web Storage 示例</h1>  
<p id="msg"></p>  
<input type="text" id="input">  
<input type="button" value="保存数据" onclick="saveStorage('input');">  
<input type="button" value="读取数据"  onclick="loadStorage('msg');">  
</body>

　　

js部分代码：

//sessionStorage示例
function saveStorage(id){  
    var target = document.getElementById(id);  
    var str = target.value;  
    sessionStorage.setItem("message",str);  
}  
function loadStorage(id){  
    var target = document.getElementById(id);  
    var msg = sessionStorage.getItem("message");  
    target.innerHTML = msg;  
}  
//localStorage示例 
function saveStorage(id){  
    var target = document.getElementById(id);  
    var str = target.value;  
    localStorage.setItem("message",str);  
}  
function loadStorage(id){  
    var target = document.getElementById(id);  
    var msg = localStorage.getItem("message");  
    target.innerHTML = msg;  
}

　　

数据是按浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到当前浏览器中保存的数据。
读写数据基本方法：

  • sessionStorage
    保存数据：sessionStorage.setItem(key,value);
    读取数据：sessionStorage.getItem(key);
  • localStorage
    保存数据：localStorage.setItem(key,value);
    读取数据：localStorage.getItem(key);

保存时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名，只能重新取键名，然后再保存键值。

简单Web留言本

如果要保存的数据量比较大，用上边的方法会非常麻烦。
先让我们看一个留言本的示例。使用一个多行文本框来输入数据，点击按钮时将文本框中的数据保存到localStorage中。表单下边放一个p元素用来显示保存的数据。
保存数据时，将文本框的内容作为键值，保存时的日期和时间作为键名来保存，计算机中对于日期和时间的值是以时间戳（1970年1月1日凌晨12点后经过的秒数）的形式进行管理的，所以保存时不可能存在重复的键名。

<body>
<h1>简单Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo');">
<input type="button" value="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
</body>
JS部分代码：

function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    alert("数据已保存。");
    loadStorage('msg');
}
function loadStorage(id){
    var result = '<table border="1">';
    for(var i = 0;i < localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        var datestr = date.toGMTString();
        result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
    }
    result += '</table>';
    var target = document.getElementById(id);
    target.innerHTML = result;
}
function clearStorage(){
    localStorage.clear();
    alert("全部数据被清除。");
    loadStorage('msg');
}

　　

作为简易数据库来使用

如果想要将Web Storage作为数据库来利用的话，有几个问题必须要考虑。首先，在数据库中，大多数表都分为几列，怎样对列来进行管理呢？然后，怎样对数据进行检索呢？如果能解决这些问题，就可以将Web Storage当做数据库来使用了。
我们来看一个客户信息管理页面的例子。客户的联系信息分为姓名、E-mail地址、电话号码、备注，把它们保存在localStorage中。如果输入客户的姓名并进行检索，可以获取这个客户端所有联系信息。

<body>
<h1>使用Web Storage来做简易数据库示例</h1>
<table>
    <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
    <tr><td>EMAIL:</td><td><input type="text" id="email"></td></tr>
    <tr><td>电话号码:</td><td><input type="text" id="tel"></td></tr>
    <tr><td>备注:</td><td><input type="text" id="memo"></td></tr>
    <tr>
        <td></td>
        <td><input type="button" value="保存" onclick="saveStorage();"></td>
    </tr>
</table>
<hr>
<p>检索:<input type="text" id="find">
        <input type="button" value="检索" onclick="findStorage('msg');">
</p>
<p id="msg"></p>
</body>

　　

JS部分代码：

function saveStorage(){
    var data = new Object;
    data.name = document.getElementById('name').value;
    data.email = document.getElementById('email').value;
    data.tel = document.getElementById('tel').value;
    data.memo = document.getElementById('memo').value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert("数据已保存。");
}
function findStorage(id){
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    var data =  JSON.parse(str);
    var result = "姓名: " + data.name + '<br>';
    result += "EMAIL: " + data.email + '<br>';
    result += "电话号码: " + data.tel  + '<br>';
    result += "备注: " + data.memo + '<br>';
    var target = document.getElementById(id);
    target.innerHTML = result;
}

　　



作者：oWSQo
链接：https://www.jianshu.com/p/da73e8a8a266
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

posted @ 2018-09-26 22:15  Archer_w  阅读(761)  评论(0)  编辑  收藏  举报