什么是 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>
