用HTML5的本地存储功能

下面的例子展示了在HTML5应用程序中你如何保存数据在客户端本地,使用localStorage属性。

 

<!DOCTYPE HTML>
<html>
<head>
    <title>Using local storage in HTML5</title>
</head>
<body οnlοad="incrementCounter();">
 
    <div id="message"></div>
    <button οnclick="clearCounter();">Clear localStorage <em>and reload page</em></button>
    <button οnclick="window.location.reload();">Reload page</button>
    <p id="timestamp"></p>
 
    <script type="text/javascript">
        function incrementCounter() {
            var message;
            if (('localStorage' in window) && (window.localStorage !== null)) {
                if (!localStorage.counter) {
                    localStorage.counter = 0;
                }
                localStorage.counter++;
                var suffix = (localStorage.counter == 1) ? "time" : "times";
                message = "<h1>You've accessed this page <em>" + localStorage.counter + "</em> " + suffix + "</h1>";
            } else {
                message = "<p>Your browser does not seem to support <code>localStorage</code>, try using <a href=\"http://www.google.com/chrome\">Google Chrome</a>.</p>";
            }
            document.getElementById("message").innerHTML = message;
            document.getElementById("timestamp").innerHTML = "Last modified: <strong>" + new Date().toLocaleTimeString() + "</strong>";
        }
        function clearCounter() {
            localStorage.clear();
            alert("Clearing the local storage");
            window.location.reload();
        }
    </script>
 
</body>
</html>

 源码下载

HTML5使用本地存储using-local-storage-in-html5.zip

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值