随笔- 178 文章- 0 评论- 10 阅读- 72072

HTML 本地缓存

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>localStorage</title>
 6         <!-- 
 7         webStorage
 8             1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
 9             2.浏览器端通过window.sessionStorage 和 window.localStorage属性来实现本地存储机制。
10             3.相关API:
11                 a.xxxStorage.setItem('key', 'value');
12                     该方法接收一对键值对作为参数，存储到本地，如果键名存在，则更新其对应的值。
13                 b.xxxStorage.getItem('key');
14                     该方法接收一个键名作为参数，返回键所对应的值。
15                 c.xxxStorage.removeItem('key');
16                     该方法接收一个键名作为参数，把键所对应的值从存储中删除。
17                 d.xxxStorage.clear();
18                     该方法会清空存储中所有数据。
19             4.备注
20                 a.SessionStorage存储的内容会随着浏览器串口关闭而消失。
21                 b.LocalStorage存储的内容，需要手动清楚才会消失。
22                 c.xxxStorage.get(xxx)如果xxx对应的value获取不到，则会返回null。
23                 d.JSON.parse(null)的结果依然是null。
24          -->
25     </head>
26     <body>
27         <h2>localStorage</h2>
28         <button onclick="saveData()">点我保存一个数据</button>
29         <button onclick="readData()">点我读取一个数据</button>
30         <button onclick="deleteData()">点我删除一个数据</button>
31         <button onclick="deleteAllData()">点我删除所有数据</button>
32         <script type="text/javascript">
33             let p = {name:'张三',sex:'男',age:20};
34             function saveData(){
35                 localStorage.setItem('msg', 'hello!!!');
36                 localStorage.setItem('msg2', 666);
37                 localStorage.setItem('person', JSON.stringify(p));
38             }
39             function readData(){
40                 console.log(localStorage.getItem('msg'));
41                 console.log(localStorage.getItem('msg2'));
42                 let person = localStorage.getItem('person');
43                 console.log(JSON.parse(person));
44             }
45             function deleteData(){
46                 localStorage.removeItem('msg2');
47             }
48             function deleteAllData(){
49                 localStorage.clear();
50             }
51         </script>
52     </body>
53     
54 </html>