HTML5中的Web Storage

在HTML5中，提供了一种在客户端本地保存数据的功能，它就是Web Storage

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>

 

posted @ 2017-05-10 16:28  农村少年  阅读(228)  评论(0)    收藏  举报