html5 - Storage 本地存儲

Storage的解釋 http://www.w3school.com.cn/html5/html_5_webstorage.asp

 

簡單的理解就是：

Storage 有兩種：

一、localStorage 永久性存儲客戶端、除非你刪除、修改不然不會消失，存儲的體積爲5M （《HTML5程序設計》講實際上是能夠超過5M只不過有的瀏覽器會提示有的則不提示.ps:我沒測過書上說的）同時數據共享，也就說 其餘頁面也能夠你訪問到你存儲的數據；

二、sessionStorage 臨時性存儲在客戶端，只要你不關閉當前頁面存數數據都在，數據不共享，其真正的用意是爲了解決 cookie封堵數據泄露(簡單說就是你在這個頁面選擇A選項 存到了cookie、你又開了同個頁面選擇B選項存到了cookie、回到A頁面提交了選項 但cookie的值實際上是B選項不是當前頁面的A選項) 

 

根據 jquery.cookie.js 編寫了一個 Storage 的jquery 的簡單粗鄙庫，API 也是根據 cookie 編寫：

$.isSession、$.isLocal 判斷當前瀏覽器是否支持 Storage 兩個屬性的方法 支持爲 true 不支持爲undefined;

$.storage 存數本地數據的函數：三個參數 name、key、value 三個值 第一個參數爲session、local 來分辨存儲的是哪種存儲類型 第二參數爲 存儲的key 值 第三個參數爲key對應的value值 若是 value 傳的參數爲‘’ 則視爲刪除這組key值，若是隻傳第一個參數爲session、local則返回對應的原生對象 ，若是傳了兩個參數視爲從本地存儲裏取key值的value，若是沒有則返回undefined. 由於低版本的IE不支持Storage 會alert('This browser does NOT support Storage!'),建議若是作低版本的時候先用 $.isSession、$.isLoca 來判斷一下客戶端是否支持；

$.removeStorage 刪除本地存數的key值：兩個參數 第一個參數name 傳參數session、local 同樣分別刪除哪一種類型的本地存儲，第二個參數key 爲刪除的key名，若是key傳入的是‘clearAll’則視爲清除所有對應本地存儲的key值

$.wachStorage 爲時時監控本地存儲key的變化函數：一個參數爲回調函數

 

(function (factory) {

    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }

}(function ($) {

    function _isStorageText( name ){ 
        if( name ==='session' || name === 'local' ){
            return true;
        }else{
            return false;
        }
    }

    var storageBrowser = {};

    if( window.sessionStorage ){

        storageBrowser.isStorage = true;
        
    }

    if( window.localStorage ){
        
        storageBrowser.isLocal = true;
    
    }
    
    $.isSession = storageBrowser.isStorage;
    $.isLocal = storageBrowser.isLocal;
    
    $.storage = function( name,key,value ){

        if( !$.isSession || !$.isLocal ){
            alert( 'This browser does NOT support Storage!' );
            return false;
        }

        if( arguments.length === 1 && !$.isFunction(name) && _isStorageText(name) ){
            switch( name )
            {
                case 'session':
                       return window.sessionStorage ;
                  break;
                case 'local':
                       return window.localStorage ;
                  break;
                default:
                      
            }
            
        }

        if(  arguments.length === 2 && !$.isFunction(name) && !$.isFunction(key)  && _isStorageText(name) ){
            switch( name )
            {
                case 'session':
                       return sessionStorage[ key ] ;
                  break;
                case 'local':
                       return localStorage[ key ] ;
                  break;
                default:
                      
            }
        }
        
        if(  arguments.length === 3 && !$.isFunction(name) && !$.isFunction(key) && !$.isFunction(value) && _isStorageText(name)   ){
            switch( name )
            {
                case 'session':
                    if ( $.trim(value).length === 0 && !$.isFunction(value)) {

                        return sessionStorage.removeItem(key);

                    }else{
                        
                        try {

                            return sessionStorage[ key ] = value;
                        
                        }catch(e) {}
                    }
                  break;
                case 'local':
                    if ( $.trim(value).length === 0 && !$.isFunction(value)) {

                        return localStorage.removeItem(key);

                    }else{

                        try {

                            return localStorage[ key ] = value;
                        
                        }catch(e) {}
                        
                    }
                       
                  break;
                default:
                      
            }
        }

        return false;

    } 


    //刪除localStorage 的key值；
    $.removeStorage = function( name,key ){

        if( arguments.length === 1 && !$.isFunction(name) && _isStorageText(name) ){

            return false;

        }

        switch( name )
        {
            case 'session':
                 if( key === 'clearAll' ){
                     sessionStorage.clear();
                     return false;
                 }else{
                     return sessionStorage[ key ] ;
                 }
                   
              break;
            case 'local':
                   if( key === 'clearAll' ){
                     localStorage.clear();
                     return false;
                 }else{
                     return localStorage[ key ] ;
                 }
              break;
            default:
                  
        }

    }

    //時時監聽 Storage 的變化;
    $.wachStorage = function( fn ){

        if( window.addEventListener ){

            window.addEventListener('storage',fn,true);

        }else{

            window.attachEvent('storage',fn);

        }

    }

}));

 

 

寫了一個小小DEMO 數據同步：同時在服務端打開兩個以上的頁面查看在單頁面選的喜歡的水果同步到另外幾個相同頁面(我沒有作兼容，其實就是試試我寫的小插件)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .cent{ width:950px; margin:0 auto;}
    li{ list-style:none;}
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.storage.js"></script>
<script>
$(function(){

        var $checkboxs = $('input:checkbox');
        var $spans = $('span');
        var $btn = $('#btn');
        var $viwMian = $('#viwMian');

        // 初始化 判斷是否有存儲過本地數據
        StorageInit();
        function StorageInit(){
            fnStorage( function(){

                if( $.storage('local','fruit') ){
                    
                    var fruitArr = $.storage('local','fruit').split("&");
                    for( var j=0,len=fruitArr.length;j<len;j++ ){ 

                        for( var i=0,len=$spans.length;i<len;i++ ){
                            
                            var spanVlue = $spans.eq(i).text();
                            
                            if( spanVlue == fruitArr[j] ){

                                $spans.eq(i).prev().attr('checked','checked');
                                
                            }
                        }
                    }

                }


            } );
        }

        // 判斷瀏覽器是否支持
        function fnStorage( fn ){
            if( $.isLocal ){

                fn();

            }    
        }

        //監控函數
        function SyncFruit( e ){

            if( e.key == 'fruit' ){
                
                for( var i=0,len=$spans.length;i<len;i++ ){
                    $spans.eq(i).prev().attr('checked',false);
                }
                var newKey = e.newValue;
                if( e.newValue ){
                    
                    var fruitArr = e.newValue.split("&");
                    for( var j=0,len=fruitArr.length;j<len;j++ ){ 

                        for( var i=0,len=$spans.length;i<len;i++ ){
                            
                            var spanVlue = $spans.eq(i).text();
                            
                            if( spanVlue == fruitArr[j] ){

                                $spans.eq(i).prev().attr('checked','checked');
                                
                            }
                        }
                    }
                }
                
            
            }
        }

        //調用的刪除
        //$.removeStorage('local','clearAll');

        //監控的調用
        $.wachStorage( SyncFruit );
        
        //多選checkbox的點擊事件
        $checkboxs.on('click',function(){

            var $this = $(this);
            var value = $(this).next().text();

            if( $this.attr('checked') == 'checked' ){
                    
                fnStorage(function(){

                    if( $.storage('local','fruit') ){
                        
                        var fruitTxt = $.storage('local','fruit');
                        fruitTxt += '&'+value;
                        $.storage('local','fruit',fruitTxt);

                    }else{

                        $.storage('local','fruit',value);

                    }

                });

            }else{
                
                fnStorage(function(){

                    var fruitArr = $.storage('local','fruit').split("&");
                    for( var i=0,len=fruitArr.length;i<len;i++ ){

                        if( fruitArr[ i ] == value ){
                            fruitArr.splice(i,1);
                        }

                    }
                    var fruitTxt = fruitArr.join("&");

                    $.storage('local','fruit',fruitTxt);

                });

                

            }
        });

        // 肯定的提交
        $btn.on('click',function(){
            

            fnStorage(function(){

                var html = '',
                arr = []; 
                $viwMian.html('');
                if( $.storage('local','fruit') ){
                    
                    var fruitArr = $.storage('local','fruit').split("&");
                    
                    html += '我選擇的有:<br/>'
                    for( var j=0,len=fruitArr.length;j<len;j++ ){ 

                        html+='<p>'+ fruitArr[j] +'</p>';
                        
                    }


                     $viwMian.append(html);

                }

            });
            
        });
        
    
});
</script>
    
</head>
<body>
    <div class="cent">
        <h2>
            選出喜歡的水果(多選題)：
        </h2>
        <ul>
            <li>
                <input type="checkbox"><span>草莓</span>
            </li>
            <li>
                <input type="checkbox"><span>蘋果</span>
            </li>
            <li>
                <input type="checkbox"><span>香蕉</span>
            </li>
            <li>
                <input type="checkbox"><span>鴨梨</span>
            </li>
            <li>
                <input type="checkbox"><span>桃子</span>
            </li>
            <li>
                <input type="checkbox"><span>火龍果</span>
            </li>
        </ul>
        <input type="button" value="確認" id="btn"><br/><br/>
        <div id="viwMian">
        
        </div>
    </div>
    
</body>
</html>

 

 

後記：

本來想在作了Storage 的 length 屬性 查看存數的個數，後來以爲沒啥太大用。。。。

這個小插件寫的有點代碼繁瑣，我感受還能夠在簡練一些，不過沒想到更好的方式，若是有大神有好方法請告知；