<!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>Document</title>
</head>
<body>
<!-- localStorage的生命周期是永久的,只要不人为删除,就不会减少
sessionSrorage的生命周期是浏览器工作时间,关闭浏览器,则数据删除
-->
<p>姓名:<input type="text" name="" id="username"></p>
<p>email:<input type="email" name="" id="email"></p>
<p>年龄:<input type="number" name="" id="age"></p>
<button onclick="saveCookie()">cookie存储数据</button>
<button onclick="saveLocal()">local存储数据</button>
<button onclick="getLocal()">local取数据</button>
<button onclick="clearLocal()">清空数据</button>
<button onclick="deleteLocal()">删除数据</button>
<p><span id="detial"></span></p>
</body>
<script>
var username = document.querySelector("#username")
var email = document.querySelector("#email")
var age = document.querySelector("#age")
var detial = document.querySelector("#detial")
function saveCookie(){
document.cookie="username="+username.value;
document.cookie="email="+email.value;
document.cookie="age="+age.value;
}
function saveLocal(){
if(window.localStorage){
//(key,value)存储方式,相同的key值只能存在一个
localStorage.setItem("username",username.value);
//数组存储方式
localStorage["email"]=email.value;
//通过点的形式寻找
localStorage.age=age.value;
}
else{
alert("您的浏览器不支持localStorage")
}
}
function getLocal(){
if(window.localStorage){
//取出来展现在页面上
//detial.innerHTML += localStorage.getItem("username")+"<br>email:"+localStorage["email"]+"<br>age:"+localStorage.age
//当key值很多的时候,采用循环
for(let i=0;i<localStorage.length;i++){
detial.innerHTML +="<br>username:"+localStorage.getItem("username")+"<br>email:"+localStorage["email"]+"<br>age:"+localStorage.age
}
}
else{
alert("您的浏览器不支持localStorage")
}
}
function clearLocal(){
//清空所有
localStorage.clear();
}
function deleteLocal(){
localStorage.removeItem("username")
}
</script>
</html>
cookie和local的存储与读取方式几乎是一样的,明白其一就明白了第二个了