提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

html5 web Storage

html5Web Storage
2023-09-11 14:22:19 时间

sessionstorage

js

function saveStorage(id) {
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);
}
 
function loadStorage(id) {
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    
    target.innerHTML=msg;
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>section</title>
		<script type="text/javascript" src="js/test5.js" ></script>
	</head>
	<body>
		<p  id="msg"></p>
		<input type="text" id="input">
        <input  type="button"	 value="保存数据" onclick="saveStorage('input');">
        <input  type="button"	 value="读取数据" onclick="loadStorage('msg');">
	</body> 
</html>

　　效果：

关闭了浏览器，数据读取不出来

loclstorage

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>section</title>
		<script type="text/javascript" src="js/test5.js" ></script>
	</head>
	<body>
		<p  id="msg"></p>
		<input type="text" id="input">
        <input  type="button"	 value="保存数据" onclick="saveSto<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>section</title>
		<script type="text/javascript" src="js/test5.js" ></script>
	</head>
	<body>
		<p  id="msg"></p>
		<input type="text" id="input">
        <input  type="button"	 value="保存数据" onclick="saveStorage('input');">
        <input  type="button"	 value="读取数据" onclick="loadStorage('msg');">
	</body> 
</html>

rage('input');">
        <input  type="button"	 value="读取数据" onclick="loadStorage('msg');">
	</body> 
</html>

　　js

function saveStorage(id) {
	var target=document.getElementById(id);
	var str=target.value;
	localStorage.setItem("message",str);
}
 
function loadStorage(id) {
	var target=document.getElementById(id);
	var msg=localStorage.getItem("message");
	
	target.innerHTML=msg;
}

　　效果：

 

相关文章