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="保存数据" οnclick="saveStorage('input');">
<input type="button" value="读取数据" οnclick="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="追加" οnclick="saveStorage('memo');">
<input type="button" value="初始化" οnclick="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="保存" οnclick="saveStorage();"></td>
</tr>
</table>
<hr>
<p>检索:<input type="text" id="find">
<input type="button" value="检索" οnclick="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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。