什么是 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>
原文地址：https://www.cnblogs.com/hui9527/p/8513670.html
时间： 2024-11-04 20:52:41