<!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>
<input type="text" name="" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector("#username");
document.querySelector("#setData").onclick = function(){
localStorage.setItem("username", username.value);
};
document.querySelector("#getData").onclick = function(){
alert(localStorage.getItem("username"));
};
document.getElementById("delData").onclick = function(){
localStorage.removeItem("username");
alert(localStorage.getItem("username"))
}
</script>
</body>
</html>
<!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>
<input type="text" name="" id="username" placeholder="请输入姓名">
<button id="setData">设置数据</button>
<script>
var uaername = document.querySelector("#username");
document.querySelector("#setData").onclick = function(){
sessionStorage.setItem("username", username.value);
alert(sessionStorage.getItem("username"))
}
</script>
</body>
</html>
<!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>
<label for="">用户名：</label>
<input type="text" name="" id="username">
<button id="save">保存</button>
<script>
var username = document.querySelector("#username");
document.querySelector("#save").onclick = function(){
var val = username.value;
localStorage.setItem("username", val);
alert(localStorage.getItem("username"))
};
</script>
</body>
</html>
<!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>
<span>新的用户名：</span>
<span id="newval"></span>
<br>
<span>旧的用户名：</span>
<span id="oldval"></span>
<script>
var newdata = document.getElementById("newval");
var olddata = document.getElementById("oldval");
window.addEventListener("storage", function(e){
newdata.innerHTML = e.newValue;
olddata.innerHTML = e.oldValue;
});
</script>
</body>
</html>