HTML5 本地存儲+layer彈層組件制作記事本
阿新 • • 發佈：2018-03-06
query utf-8 IT mod htm maximum 下載 text data
什麽是 HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.
數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。
- 保存數據：localStorage.setItem(key,value);
- 讀取數據：localStorage.getItem(key);
- 刪除單個數據：localStorage.removeItem(key);
- 刪除所有數據：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);
了解了本地存儲接下來我們利用html5的本地存儲制作一個記事本功能，我們還需要到layer官網下載layer組件
具體代碼如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <title>記事本</title> 7 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 8 <script src="layer/layer.js"></script> 9 </head> 10 <body> 11 <div> 12 <button type="button" onclick="notepad()">記事本</button> 13 </div> 14 15 <script> 16 // 記事本 17 function notepad(){ 18 if(typeof(Storage) !== "undefined"){ // Check browser support 19 var local = window.localStorage, 20 data = local.getItem("memoData"); // 讀取本地存儲的信息 21 layer.prompt({ 22 title: ‘記事本‘, 23 formType: 2, 24 value: data, 25 area: [‘500px‘, ‘400px‘] // 自定義文本域寬高 26 }, function(text, index){ 27 layer.close(index); 28 if(data != text){ 29 local.removeItem("memoData"); // 刪除本地存儲的信息 30 local.setItem("memoData", text); // 存儲數據信息到本地 31 } 32 }); 33 }else{ 34 layer.msg("抱歉！您的瀏覽器不支持 Web Storage ..."); 35 } 36 } 37 </script> 38 </body> 39 </html>
HTML5 本地存儲+layer彈層組件制作記事本