Vue的浏览器中的 webStorage
1：Api介绍
/*
webStorage
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
xxxxxStorage.getItem('person');
该方法接受一个键名作为参数，返回键名对应的值。
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。
xxxxxStorage.clear()
该方法会清空存储中的所有数据。
备注：
SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容，需要手动清除才会消失。
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
JSON.parse(null)的结果依然是null。
*/
2：示例代码
localStorage.html
<!DOCTYPE html> <lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>localStorage</title> </head> <body> <h2>localStorage</h2> <button onclick="saveData()">保存一个数据入localStorage</button><br/><br/> <button onclick="readData()">读取一个数据入localStorage</button><br/><br/> <button onclick="delData()">删除一个数据入localStorage</button><br/><br/> <button onclick="clearData()">清空localStorage</button><br/><br/> </body> <script type="text/javascript"> let p ={name:'李四',age:18}; function saveData() { localStorage.setItem('msg','Hello!'); localStorage.setItem('msg2',6666); localStorage.setItem('person',JSON.stringify(p)); } function readData() { console.log(localStorage.getItem('msg')); console.log(localStorage.getItem('msg2')); console.log(localStorage.getItem('msg3')); console.log(JSON.parse(localStorage.getItem('person'))); } function delData() { localStorage.removeItem('msg'); localStorage.removeItem('msg2'); localStorage.removeItem('person'); } function clearData(){ localStorage.clear(); } </script> </html>
sessionStorage.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sessionStorage</title> </head> <body> <h2>sessionStorage</h2> <button onclick="saveData()">保存一个数据入sessionStorage</button><br /><br /> <button onclick="readData()">读取一个数据入sessionStorage</button><br /><br /> <button onclick="delData()">删除一个数据入sessionStorage</button><br /><br /> <button onclick="clearData()">清空sessionStorage</button><br /><br /> </body> <script type="text/javascript"> let p = { name: '李四', age: 18 }; function saveData() { sessionStorage.setItem('msg', 'Hello!'); sessionStorage.setItem('msg2', 6666); sessionStorage.setItem('person', JSON.stringify(p)); } function readData() { console.log(sessionStorage.getItem('msg')); console.log(sessionStorage.getItem('msg2')); console.log(sessionStorage.getItem('msg3')); console.log(JSON.parse(sessionStorage.getItem('person'))); } function delData() { sessionStorage.removeItem('msg'); sessionStorage.removeItem('msg2'); sessionStorage.removeItem('person'); } function clearData() { sessionStorage.clear(); } </script> </html>
3：界面效果
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================