<sub id="3ft55"></sub>

<noframes id="3ft55"><form id="3ft55"><listing id="3ft55"></listing></form>
<form id="3ft55"></form>

      <address id="3ft55"></address><address id="3ft55"><address id="3ft55"><listing id="3ft55"></listing></address></address>

        HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用_HTML5教程

        編輯Tag賺U幣

        推薦:Bootstrap 學習分享
        Bootstrap 是由Twitter 工程師推出的基于HTML,CSS,JAVASCRIPT的簡潔靈活的流行前端框架

        使用HTML5 Web存儲的localStorage和sessionStorage方式進行Web頁面數據本地存儲。

        頁面參考如下圖,能將頁面上的數據進行本地存儲。并能讀取存儲的數據顯示在頁面上。

        localStorage(本地存儲),可以長期存儲數據,沒有時間限制,一天,一年,兩年甚至更長,數據都可以使用。

        sessionStorage(會話存儲),只有在瀏覽器被關閉之前使用,創建另一個頁面時同意可以使用,關閉瀏覽器之后數據就會消失。

        某個博主的測試localStorage兼容情況,如下
        Chrome4+ 開始支持localStorage

        Firefox3.5+開始支持localStorage
        Firefox1.5+支持globalStorage

        IE8+支持localStorage
        IE7兼容模式支持localStorage
        IE5.5+支持userdata

        Safari 4+ 支持localStorage
        Opera10.5+支持localStorage

         

        復制代碼 代碼如下:www.xyyouth.net.cn

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
        textarea {
        width: 300px;
        height: 300px;
        }
        .button {
        width: 100px;
        }
        </style>
        </head>
        <body>
        <script type="text/javascript">
        //使用HTML5 Web存儲的localStorage和sessionStorage方式進行Web頁面數據本地存儲。
        //頁面參考如下圖,能將頁面上的數據進行本地存儲。并能讀取存儲的數據顯示在頁面上。
        function saveSession() {
        var t1 = document.getElementById("t1");
        var t2 = document.getElementById("t2");
        var mydata = t2.value;
        var oStorage = window.sessionStorage;
        oStorage.mydata = mydata;
        t1.value += "sessionStorage保存mydata:" + mydata + "\n";
        }
        function readSession() {
        var t1 = document.getElementById("t1");
        var oStorage = window.sessionStorage;
        var mydata = "不存在";
        if (oStorage.mydata) {
        mydata = oStorage.mydata;
        }
        t1.value += "sessionStorage讀取mydata:" + mydata + "\n";
        }
        function cleanSession() {
        var t1 = document.getElementById("t1");
        var oStorage = window.sessionStorage;
        var mydata = "不存在";
        if (oStorage.mydata) {
        mydata = oStorage.mydata;
        }
        oStorage.removeItem("mydata");
        t1.value += "sessionStorage清除mydata:" + mydata + "\n";
        }
        function saveStorage() {
        var t1 = document.getElementById("t1");
        var t2 = document.getElementById("t2");
        var mydata = t2.value;
        var oStorage = window.localStorage;
        oStorage.mydata = mydata;
        t1.value += "localStorage保存mydata:" + mydata + "\n";
        }
        function readStorage() {
        var t1 = document.getElementById("t1");
        var oStorage = window.localStorage;
        var mydata = "不存在";
        if (oStorage.mydata) {
        mydata = oStorage.mydata;
        }
        t1.value += "localStorage讀取mydata:" + mydata + "\n";
        }
        function cleanStorage() {
        var t1 = document.getElementById("t1");
        var oStorage = window.localStorage;
        var mydata = "不存在";
        if (oStorage.mydata) {
        mydata = oStorage.mydata;
        }
        oStorage.removeItem("mydata");
        t1.value += "localStorage清除mydata:" + mydata + "\n";
        }
        </script>
        <div>
        <textarea id="t1"></textarea>
        <label>需要保存的數據: </label>
        <input type="text" id="t2" />
        <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" />
        <input type="button" class="button" onclick="readSession()" value="session讀取" />
        <input type="button" class="button" onclick="cleanSession()" value="session清除" />
        <input type="button" class="button" onclick="saveStorage()" value="local保存" />
        <input type="button" class="button" onclick="readStorage()" value="local讀取" />
        <input type="button" class="button" onclick="cleanStorage()" value="local清除" />
        </div>
        </body>
        </html>


        分享:input元素的url類型和email類型簡介
        在過去我們制作網頁輸入框,會用到不少JS驗證,如今有了HTML5寫這種效果已經沒有那么麻煩了,下面我來給大家介紹兩種HTML5的input的新增加的類型應用。

        來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
        相關HTML5教程
        夫妻性生生活视频 - 视频 - 在线观看 - 影视资讯 - 品爱网