本地存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地存储</title>
</head>
<input type="text" />
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
</body>
<script>
var inp=document.querySelector("input");
var butArr=document.querySelectorAll("button");
butArr[0].onclick=function () {
window.localStorage.setItem("userName",inp.value);
}
butArr[1].onclick=function () {
inp.value=window.localStorage.getItem("userName");
}
butArr[3].onclick=function () {
window.localStorage.removeItem("userName");
}
</script>
</html>
会话存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" />
<button>sessionStorage存储</button>
<button>sessionStorage获取</button>
<button>sessionStorage更新</button>
<button>sessionStorage删除</button>
<button>sessionStorage清除</button>
</body>
<script>
var inp=document.querySelector("input");
var btnArr=document.querySelectorAll("button");
btnArr[0].onclick=function () {
window.sessionStorage.setItem("userName",inp.value);
}
btnArr[1].onclick=function () {
inp.value=window.sessionStorage.getItem("userName");
console.log(1);
}
btnArr[2].onclick=function () {
window.sessionStorage.setItem("userName",inp.value);
}
btnArr[3].onclick=function () {
window.sessionStorage.removeItem("userName");
}
btnArr[4].onclick=function () {
window.sessionStorage.clear();
}
</script>
</html>