Web Storage又分为两种:
1,sessionStorage
session,指的是一次会话,其时间作用于你访问开始一个网站到你关闭这个网站。
所以你用sessionStorage保存的数据在你关闭网站页面的时候就会被销毁,一般用于临时的数据保存
2,localStorage
local,指的是本地,它会把数据保存到你的硬盘中,即是浏览器被关闭了,下次访问也能读取到已经保存了的数据。
值得注意的是,由于不同浏览器数据存储的位置不一样,所以每个浏览器所存储的数据都是独立的,不能在其他浏览器中获取
我们来看看最简单的实现代码:
我准备了一个p标签,一个输入框,两个按钮。分别用于显示读取出来的数据,提供内容的输入,提交保存,读取数据。
代码中用到了2个方法,setItem和getItem,对应的是保存和读取,
当然你也可以用sessionStorage.[key] = value;的方式去保存,取数据的时候也非常简单,直接用sessionStorage.[key],你会得到你想到的东西的,
需要注意的是,用session保存的数据用local是取不到的,反过来也一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebStorage</title>
</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');">
<script>
function saveStorage(id) {
var targer = document.getElementById(id);
var str = targer.value;
sessionStorage.setItem('message', str);
}
function loadStorage(id) {
var target = document.getElementById(id);
var msg = sessionStorage.getItem('message');
target.innerHTML = msg;
}
/*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;
}*/
</script>
</body>
</html>