Cookies可以将web数据保存在本地，但有一些弊端，如Cookies的大小被限制在4KB，Cookies是随着Http事务一起发送的，这样就浪费了一定的带宽，再者操作Cookies是相对麻烦的，Web storage是客户端将Web上的数据存储在本地，有两种：sessionStorage和localStorage。
sessionStorage：将数据保存在session中，session指的是用户在浏览某个网站时，从进入这个网站到关闭浏览器经过的时间，而sessionStorage保存的数据的生命周期就是这段时间，在这段时间之外sessionStorage保存的数据就会失效；
localStorage：将数据保存在客户端本地的硬件设备上，即使浏览器被关闭了数据依然存在，下次打开网站之后，之前保存的数据依然可以使用，不会自动废弃。
代码截图：
代码示例：
index.html
<head>
<script src="app.js"></script>
</head>
<body>
<p id="id_p"></p>
<input id="id_input" type="text" />
<input type="button" value="保存数据" οnclick="saveData('id_input')" />
<input type="button" value="显示数据" οnclick="showData('id_p')" />
</body>
app.js
function saveData(id){
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message", str);
alert("存储成功");
}
function showData(id){
var target = document.getElementById(id);
var str = sessionStorage.getItem("message");
target.innerHTML = str;
//target.innerText = str;
alert(str);
}
效果图：
［注意］当我们关闭浏览器，重新打开浏览器之后，会发现无法再获取该数据，若想将数据长久保存在客户端本地，需要将上面的sessionStorage换为localStorage.
扫一扫
2785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
