HTML5 本地存储+layer弹层组件制作记事本

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

 

posted @ 2018-03-06 12:06  HUI9527  阅读(347)  评论(0)  编辑  收藏  举报