在H4中可以使用cookies在客户端保存用户信息，但是cookies存储永久数据存在以下几个问题：
cookies的大小被限制在4kb。cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。cookies是很难的。在这种情况下，H5新增了一种在客户端本地保存数据的功能，就是Web Storage。
Web Storage又分为两种：
sessionStoragesessionStorage中。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;
}
数据是按浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到当前浏览器中保存的数据。
读写数据基本方法：
sessionStoragesessionStorage.setItem(key,value);sessionStorage.getItem(key);
localStorage.setItem(key,value);localStorage.getItem(key);
保存时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名，只能重新取键名，然后再保存键值。
如果要保存的数据量比较大，用上边的方法会非常麻烦。
先让我们看一个留言本的示例。使用一个多行文本框来输入数据，点击按钮时将文本框中的数据保存到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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
原文：https://www.cnblogs.com/archer-wen/p/9710421.html