H5本地存儲
阿新 • • 發佈：2018-09-27
true 關閉 pre brush 保存數據 onclick ++ 初始 就是
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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並註明出處。
H5本地存儲