HTML5 Web Storage示例

chrome浏览查看

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Web Storage示例</title>
    <script type="text/javascript">
        // sessionStorage示例JS
        function savesessionStorage(id) {
            var target = document.getElementById(id);
            var str = target.value;
            sessionStorage.setItem("message", str);
        }

        function loadsessionStorage(id) {
            var target = document.getElementById(id);
            var msg = sessionStorage.getItem("message");
            target.innerHTML = msg;
        }

        // localStorage示例JS
        function savelocalStorage(id) {
            var target = document.getElementById(id);
            var str = target.value;
            localStorage.setItem("message", str);
        }

        function loadlocalStorage(id) {
            var target = document.getElementById(id);
            var msg = localStorage.getItem("message");
            target.innerHTML = msg;
        }
    </script>
</head>
<body>
<div>
    <h2>sessionStorage示例</h2>

    <p id="sessionMsg"></p>
    <input type="text" id="sessionInput">
    <input type="button" value="保存数据" onClick="savesessionStorage('sessionInput');">
    <input type="button" value="读取数据" onClick="loadsessionStorage('sessionMsg');">
    <br/>

    <h2>localStorage示例</h2>

    <p id="localMsg"></p>
    <input type="text" id="localInput">
    <input type="button" value="保存数据" onClick="savelocalStorage('localInput');">
    <input type="button" value="读取数据" onClick="loadlocalStorage('localMsg');">
</div>
</body>
</html>

 

当我们点击保存数据时，分别调用webstoragescript.js（代码在文章 后面）中的savesessionStorage和savelocalStorage方法，点击读取数据时分别调用loadsessionStorage 和loadlocalStorage方法。

让我们打开JS脚本文件来看下，该脚本分别使用了sessionStorage和localStorage两种方法。这两种方法的HTML代码只有p id和input id不同 ，都是当用户在input文本输入内容并点击保存数据按钮时保存数据，点击读取数据时读取保存的数据。

但是他们对数据的处理方式都不一样，sessionStorage方法如果关闭了浏览器，这个保存的数据就丢失，在一次打开浏览器浏览这个页面的时候，点击读取数据将读取不到任何数据。

而localStorage则是浏览器被关闭，下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据。当然，这个数据是区分浏览器的，在别的浏览器中是读取不到这个浏览器保存的数据的。

二、两种对象使用方法


1．sessionStorage
保存数据：sessionStorage.setItem(key,value);
读取数据：sessionStorage.getItem(key);


2．localStorage
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);

看上面的说明相信大家都能很快明白两种对象的使用方法。但是，不管是使用哪个对象，都是用setItem(键名,键值)的方法来保存数据，保存后不允许修 改键名，但是可以修改键值也就是说只新建键名，再保存键值。使用getItem方法读取数据时，将参数指定为键名，返回键值。

 

posted @ 2012-05-03 16:23  dsfderek  阅读(233)  评论(0)  编辑  收藏  举报