<menu id="g42kk"></menu>
  • <menu id="g42kk"><tt id="g42kk"></tt></menu>
  • 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.woguai8.com

    <!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教程
    波多野结衣人妻教师痴
    <menu id="g42kk"></menu>
  • <menu id="g42kk"><tt id="g42kk"></tt></menu>