H5——webStorage

来源：互联网发布：网站域名加急备案编辑：程序博客网时间：2024/05/18 05:13

sessionStorage:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>sessionStorage["name"]="abc";sessionStorage.setItem("age",20);</script><a href="storage2.html">读取数据</a></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>var name=sessionStorage["name"];console.log(name);var age=sessionStorage.getItem("age");console.log(age);console.log(sessionStorage.length);//2console.log(sessionStorage.key(1));//namesessionStorage.removeItem("name");</script></body></html>

---------------------------------------------------------------------------------

localStorage:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>localStorage.setItem("bookname","js权威指南");localStorage["price"]=50.00;</script><a href="storage4.html">读取数据</a></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>var name=localStorage.getItem("bookname");console.log(name);var price=localStorage.getItem("price");console.log(price);</script></body></html>

-----------------------------------------------------------------------------------

localStorage(2):

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.blue{background: blue;}.red{background: red;}.dark{background: #000;}</style></head><body><select name="" id="selectTheme"><option value="blue">蔚蓝天空</option><option value="red">芭比公主</option><option value="dark">暗黑主题</option></select><script>function getId(id){return document.getElementById(id);}var select=getId("selectTheme");select.onchange=function(){document.body.className=this.value;localStorage.setItem("userStyle",this.value);}</script></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{color: #FFF;}.blue{background: blue;}.red{background: red;}.dark{background: #000;}</style></head><body><h2>用户中心</h2><script>var className=localStorage.getItem("userStyle");console.log(className);if(className){document.body.className=className;}//监听事件window.onstorage=function(){var className=localStorage.getItem("userStyle");document.body.className=className;}</script></body></html>

阅读全文

0 0