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');
ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！
网易公司福利 164人发布
