Web Storage概述

Web Storage概述
①sessionStorage:将数据保存在sessionStorage中。指的是用户从进入网站到浏览器关闭的这段时间，session对象可以保存这段时间那内所要求保存的任何数据

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;
 }

②localStorage:将数据保存在客户端本地的硬件设备（通常指的是硬盘，也可以是其他硬件设备），即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问该网站的时候仍然可以继续使用。两者不一样的是，sessionStorage为临时存储，而localStorage为永久保存。

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;
}

下面就使用一个简单的html页面来展示一下

<body>
	 <h1>web storage实例</h1>
	 <p id="msg"></p>
	 <input type="text" id="input">
	 <input type="button" value="保存数据" onclick="saveStorage('input');">
	 <input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>

代码运行结果如下：
在这里插入图片描述
最后附上函数的用法：
①sessionStorage
保存数据的方法：

sessionStorage.setItem('key', 'value');

读取数据的方法：

变量=sessionStorage.getItem('key');

②localStorage
保存数据的方法：

localStorage.setItem('key', 'value');

读取数据的方法：

变量=localStorage.getItem('key');

猜你喜欢