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);//2
console.log(sessionStorage.key(1));//name
sessionStorage.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.οnchange=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>