<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本地存储</title>
</head>
<body>
<input type="text" name="">
<input type="button" value="存储" onclick=saveText()>
<input type="button" value="读取" onclick=readText()>
<input type="button" value="删除" onclick=clearText()>
<div id="text"></div>
<a href="本地存储_1.html">读取</a>
</body>
<script type="text/javascript">
// web 本地存储方案
// localStorage 永久存储 一直存储除非手动清除 跨网站获取
// sessionStorage 回话（临时)存储
// 大小:5Mb生命周期从浏览器打开开始到网页关闭结束
var input = document.querySelector("input[type=text]");
function saveText(){
if(window.sessionStorage){
if(input.value != ""){
// 存储 用setItem()方法两个参数 key value
window.sessionStorage.setItem("data", input.value);
input.value = "";
}else{
alert("您还没有输入内容 不能进行存储")
}
}else{
alert("您的浏览器不支持本地存储，请及时更新")
}
}
function readText(){
var text = window.sessionStorage.getItem("data");
if(text){
document.querySelector("#text").innerHTML = text;
}else{
document.querySelector("#text").innerHTML = "";
alert("没有获取到任何内容");
}
}
function clearText(){
// 删除
window.localStorage.removeItem("data");
// readText();
}
</script>
</html>
网友评论