?
目录
?
一:定义和使用
二:语法
三:返回值
四:小案例:
一:定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,
在关闭窗口或标签页之后将会删除这些数据。
提示:?如果你想在浏览器窗口关闭后还保留数据,可以使用?localStorage?属性, 该数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
二:语法
window.sessionStorage
保存数据语法:
sessionStorage.setItem("key", "value");
读取数据语法:
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法:
sessionStorage.removeItem("key");
删除所有数据:
sessionStorage.clear();
三:返回值
四:小案例:
?
<!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>
<div id="mm"></div>
<br> <button id="btn">登录</button><br>
<br>
<button id="del">退出登录</button>
<br>
用户名:
<input id="user" type="text" placeholder="你的用户名">
<br>
密码:
<input id="pwd" type="text" placeholder="密码">
</body>
<script>
//存储
var user = document.getElementById("user");
var pwd = document.getElementById("pwd");
user.onblur = function () {
var userval = user.value;
var username = sessionStorage.setItem("username", userval);
console.log(userval);
}
pwd.onblur = function () {
var pwdval = pwd.value;
var username = sessionStorage.setItem("userpwd", pwdval);
console.log(pwdval);
}
//获取
var mm = document.getElementById("mm");
var btn = document.getElementById("btn");
btn.onclick = function () {
mm.innerHTML = sessionStorage.getItem("username");
}
// 删除
var del = document.getElementById("del");
del.onclick = function () {
sessionStorage.removeItem("username");
sessionStorage.removeItem("userpwd");
history.go(0);
}
//如果有值显示,没有就跳转
window.onload = function () {
if (sessionStorage.getItem("username")) {
alert("欢迎你尊敬的");
mm.innerHTML = sessionStorage.getItem("username");
}
else {
alert("请登录");
// window.location.href="index.html"
}
};
</script>
</html>
|