html5-簡單web留言功能
阿新 • • 發佈：2020-08-28
localStorage 方法
特點：持久化的本地儲存，除非主動手動刪除，否則資料一直不會過期。
方法：
1.設定
setItem(key,value)：在本地客戶端儲存一個字串型別的資料。
setItem.key=value：也可以像這樣直接儲存。儲存資料：
localStorage.setItem(key, value);儲存新增資料例子：
//方法1向本地儲存中新增一個名為name,值為"syl"的key-value物件
localStorage.setItem("name", "syl");
//方法2
localStorage["price"] = 1314;
//方法3
localStorage.amount = 520; 注：使用 setItem 方法儲存資料時，將第一個引數 key 指定為鍵名，將第二個引數 value 指定為鍵值，儲存時不允許儲存相同的鍵名，儲存後可以修改鍵值，但不允許改鍵名（只能重新取鍵名，然後再儲存鍵值）。
2.獲取
getItem(key)：讀取已儲存在本地的資料，獲取鍵值。
localStorage.key：也可以像這樣直接獲取值。讀取資料：
localStorage.getItem(key);注：使用 getItem 方法讀取資料時，將引數指定為鍵名，返回鍵值。
3.刪除
removeItem(key)：移除已儲存在本地資料，通過鍵名作為引數刪除資料。
localStorage.clear()：也可以一次性清除 刪除單個數據：
localStorage.removeItem(key);注：通過 key 刪除本地資料。
例子：
<body>
<h1>簡單Web留言本</h1>
<textarea id="memo" cols="60" rows="6"></textarea><br />
<input type="button" value="新增留言" onclick="saveStorage('memo');" />
<input type="button" value="清空資料" onclick="clearStorage();" />
<input
type="button"
value="清空最後一個數據"
onclick="clearsingleStorage();"
/>
<hr />
<p id="msg"></p>
<script type="text/javascript">
//savaStorage是一個新增留言的函式
function saveStorage(id) {
//獲取textarea的value值
var data = document.getElementById(id).value;
//獲取當前時間
var time = new Date().toUTCString();
//將當前時間作為鍵名，textarea的value值（也就是使用者輸入的值）的值作為鍵值
localStorage.setItem(time, data);
//顯示留言
showMsg("msg");
}
//showMsg是一個顯示留言的函式
function showMsg(id) {
var result = '<table border="1">';
//遍歷本地儲存資料
for (var i = 0; i < localStorage.length; i++) {
//獲取key值
var key = localStorage.key(i);
//獲取value值
var value = localStorage.getItem(key);
//顯示資料
result += "<tr><td>" + value + "</td><td>" + key + "</td></tr>";
}
result += "</table>";
var target = document.getElementById(id);
target.innerHTML = result;
}
//顯示留言
showMsg("msg");
//clearStorage是一個清空留言的函式
function clearStorage() {
//清空資料
localStorage.clear();
//顯示留言
showMsg("msg");
}
//clearsingleStorage是一個刪除單個數據的函式
function clearsingleStorage() {
localStorage.removeItem(localStorage.key(localStorage.length - 1));
//顯示留言
showMsg("msg");
}
</script>
</body>