<!DOCTYPE html><html lang="en"><head> ? ?<meta charset="UTF-8"> ? ?<title>Storage網(wǎng)頁換膚效果</title> ? ?<style> ul{ ? ? ? ? ? ?width: 800px; height: 40px; margin: 0 auto; } ? ? ? ?ul li{ ? ? ? ? ? ?width: 100px; height: 40px; line-height: 40px; color: white; list-style: none; float: left; } ? ? ? ?ul li a{ ? ? ? ? ? ?text-decoration: none; float: left; color: deepskyblue; } ? ? ? ?ul li a:hover{ ? ? ? ? color: aquamarine; } ? ? ? ?div { ? ? ? ? ? ?width: 200px; height: 200px; margin: 10px auto; } ? ?</style> ? ?<script> if(typeof localStorage=='undefined') ? ? ? ?{ ? ? ? ? ? ?window.alert("瀏覽器不支持localStorage"); } ? ? ? ?else { ? ? ? ? ? ?var storage=localStorage; var colorArray=new Array("blue","green","orange"); function blueColor() ? ? ? ? ? ?{ ? ? ? ? ? ? ? ?var div1=document.getElementById("div1"); div1.style.backgroundColor=colorArray[0]; window.localStorage.setItem('divBackColor','colorArray[0]'); } ? ? ? ? ? ?function greenColor() ? ? ? ? ? ?{ ? ? ? ? ? ? ? ?var div1=document.getElementById("div1"); div1.style.backgroundColor=colorArray[1]; window.localStorage.setItem('divBackColor','colorArray[1]'); } ? ? ? ? ? ?function orangeColor() ? ? ? ? ? ?{ ? ? ? ? ? ? ? ?var div1=document.getElementById("div1"); div1.style.backgroundColor=colorArray[2]; window.localStorage.setItem('divBackColor','colorArray[2]'); } ? ? ? ? ? ?window.onload=function colorLoad() ? ? ? ? ? ?{ ? ? ? ? ? ? ? ?document.getElementById("div1").style.backgroundColor=window.localStorage.getItem('divBackColor'); } ? ? ? ?} ? ?</script></head><body> ? ? <ul> ? ? ? ? <li><a href="#"onclick="blueColor()">藍(lán)色皮膚</a> </li> ? ? ? ? <li><a href="#"onclick="greenColor()">綠色皮膚</a> </li> ? ? ? ? <li><a href="#"onclick="orangeColor()">橙色皮膚</a> </li> ? ? </ul> ? ? <div id="div1"></div></body></html>
使用localStorage進(jìn)行存儲(chǔ)，實(shí)現(xiàn)換膚效果，當(dāng)再次打開或者刷新網(wǎng)頁時(shí)無法實(shí)現(xiàn)保存上一次的操作
追萌
2017-06-02 22:28:44
