什么是 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 support19 ????????????????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弹层组件制作记事本
原文地址：https://www.cnblogs.com/hui9527/p/8513670.html