Web端本地存儲

1.需求背景:當用戶在頁面上添加一行一行的數據時，忽然發現網絡斷掉了，頁面上編輯的數據無法保存進數據庫，因此須要一個本地端的臨時保存功能，以便在網絡通暢後從新加載出來！

2.解決方案:

   結合網上搜刮，考慮到了這幾種方式：1)採用cookie; 2)看能不能採用瀏覽器的頁面緩存來模擬 3)使用html5

  1)cookie使用(作測試是直接用瀏覽器打開沒有效果,須要放到站點下)

     全部瀏覽器都支持，因此不須要去考慮兼容性的問題;

    瀏覽器對於同一domain最多支持20個左右cookie，每一個cookie的長度也有限制，超長部分就會被截掉

    過時的限制:在cookie的生命週期內有效，過時就會被清掉

    還有就是每次對服務器的請求cookie都會附帶上去增長了網絡帶寬

   鑑於以上幾點考慮,而且項目中但願以文件形式存儲，不予考慮！

   cookie存儲操做示例:

        function setCookie() {
            var value = $('#data').val();
            if (value != '' && $.trim(value) != '') {
                var expireDate = new Date();
                expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);
                document.cookie = "data=" + escape(value) + ("; expires=" + expireDate.toGMTString());
               
            } else {
                alert('請輸入要存儲的數據！');
            }
        }
        function getCookie() {
            if (document.cookie.length > 0) {
                var startIndex = 5;
                var endIndex = document.cookie.indexOf(";", 0);
                var data = "";
                if (endIndex != -1) {
                    data = unescape(document.cookie.substring(startIndex, endIndex));
                    
                } else {
                    data = unescape(document.cookie.substring(startIndex, document.cookie.length));
                }
                $('#data-display').html(data);
            }
        }

　2).localStorage

      html5本地存儲分爲兩種，一是key-value對的形式存儲，一種是DateBase存儲;

    1.key-value本地存儲有sessionStorage和localStorage兩種

      sessionStorage:會話存儲，生命期從進入網站開始，從關閉網站後結束

      localStorage:本地存儲,即便關閉瀏覽器，再次打開時一樣可以讀取到存儲的數據，這也是其與sessionStorage的區別

      示例:

window.localStorage.setItem('name','istone');
window.localStorage.getItem('name');

　　2.html5本地數據庫,提供了一套API來操做

 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
         var msg;
			
         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            msg = '<p>Log message created and row inserted.</p>';
            document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>Found rows: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;
					
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

　　瀏覽器支持狀況

 

   3)h5File API

  對於頁面數據的保存，採用js庫將數據json化,如:JSON.stringify(),IE的數據保存網上搜到是調用瀏覽器'另存爲'的功能來保存成txt，而對於chrome的數據保存調用html5的API接口blob封裝數據提供給a標籤的href,文件名提供給download

        function saveDraftForIE(fileName,content) {
            var win = window.open('', '', 'top=10000,left=10000');
            win.document.write(content);
            win.document.execCommand('SaveAs', '', fileName)
            win.close();
        }
        function saveDraftForChrome(fileName,content) {
            function fake_click(obj) {
                var ev = document.createEvent("MouseEvents");
                ev.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                    );
                obj.dispatchEvent(ev);
            }
            var urlObject = window.URL || window.webkitURL || window;
            var export_blob = new Blob([content]);
            var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
            save_link.href = urlObject.createObjectURL(export_blob);
            save_link.download = fileName;
            fake_click(save_link);
        }

　　對於本地文件的讀取，採用html5 fileAPI:FileReader,經過readAsText方法讀取到本地json串,JSON.parser()轉回去.