html5 - Storage 本地存储

时间 2019-11-20

原文原文链接

Storage的解释 http://www.w3school.com.cn/html5/html_5_webstorage.asphtml

简单的理解就是：html5

Storage 有两种：jquery

一、localStorage 永久性存储客户端、除非你删除、修改不然不会消失，存储的体积为5M （《HTML5程序设计》讲实际上是能够超过5M只不过有的浏览器会提示有的则不提示.ps:我没测过书上说的）同时数据共享，也就说其余页面也能够你访问到你存储的数据；web

二、sessionStorage 临时性存储在客户端，只要你不关闭当前页面存数数据都在，数据不共享，其真正的用意是为了解决 cookie封堵数据泄露(简单说就是你在这个页面选择A选项存到了cookie、你又开了同个页面选择B选项存到了cookie、回到A页面提交了选项但cookie的值实际上是B选项不是当前页面的A选项) 浏览器

根据 jquery.cookie.js 编写了一个 Storage 的jquery 的简单粗鄙库，API 也是根据 cookie 编写：cookie

$.isSession、$.isLocal 判断当前浏览器是否支持 Storage 两个属性的方法支持为 true 不支持为undefined;session

$.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 来判断一下客户端是否支持；app

$.removeStorage 删除本地存数的key值：两个参数第一个参数name 传参数session、local 同样分别删除哪一种类型的本地存储，第二个参数key 为删除的key名，若是key传入的是‘clearAll’则视为清除所有对应本地存储的key值函数

$.wachStorage 为时时监控本地存储key的变化函数：一个参数为回调函数ui

(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 属性查看存数的个数，后来以为没啥太大用。。。。

这个小插件写的有点代码繁琐，我感受还能够在简练一些，不过没想到更好的方式，若是有大神有好方法请告知；