web存储分为sessionStorage(会话)存储和localStorage(本地)存储
sessionStorage就是在打开当前会话窗口时存储地数据,一旦关闭会话窗口,数据就没了,非常地不方便
而localStorage则解决了这个问题直接把数据存储在本地
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 存储数据到本地,大小位5MB左右
setItem(key,value存储数据,以键值对存储)
getItem(key)
remoItem(key)
clearItem()清楚所有的存储内容
-->
<input type="text" name="" id="userName">
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
</body>
<script>
document.querySelector("#setData").onclick=function(){
var name=document.querySelector("#userName").value;
//在F12 application看数据 会话数据存储在当前页面的内存中
window.sessionStorage.setItem("userName",name);
//本地存储 存储内容20MB
window.localStorage.setItem("user",name);
}
document.querySelector("#getData").onclick=function(){
//在F12 application看数据 会话数据存储在当前页面的内存中
var name= window.sessionStorage.getItem("userName",name);
//本地存储
console.log(name);
}
</script>
</html>