HTML 5 中WebStorage實現資料本地儲存
阿新 • • 發佈:2019-01-22
webstorage 分sessionStorage和localstorage,sessionStorage是臨時儲存,localStorage是永久儲存。 sessionStorage如果瀏覽器關閉了,資料就沒有了,而localStorage則不會。
sessionStorage: 儲存資料 sessionStorage.setItem(key, value); 讀取資料 sessionStorage.getItem(key); localStorage: 儲存資料 localStorage.setItem(key, value); 讀取資料 localStorage.getItem(key);示例
<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script language="JavaScript"> function saveStorage(id){ var target = document.getElementById(id); var str = target.value; sessionStorage.setItem("msg", str); } function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("msg"); target.innerHTML = msg; } </script> </head> <body> <p id="msg"></p> <input type="text" id="input"/> <button onclick="saveStorage('input')">儲存資料</button> <button onclick="loadStorage('msg')">獲取資料</button> </body> </html></span>
如果使用得好,也可將webStorage作為一個簡易的資料庫,鍵的值採用JSON字串就可以。當然這只是可以實現,運用的時候,webStorage的空間還是很珍貴的,一般大多數瀏覽器都只提供5M左右的空間。