JS对cookies、localStorage、sessionStorage三种数据操作例子

JS对cookies、localStorage、sessionStorage三种数据操作例子;

<script type="application/x-javascript">
    
    function c(str) {
        console.log(str);
    }

    var doc = document;

    var button = document.getElementById("button");

    button.addEventListener("click",function(){
        test1();
        test2();
        test3();


    },false)

    function test1(){

        cookieUtils.set("name","a001");
        cookieUtils.set("pwd","123456");
        cookieUtils.set("age","23");

        c(cookieUtils.get("pwd"));
       // c(cookieUtils.del("pwd"));

        c(doc.cookie);
    }

    function test2(){
        sessionStorageUtils.set("name","a001");
        sessionStorageUtils.set("pwd","123456");
        sessionStorageUtils.set("age","23");

        c(sessionStorageUtils.get("name"))
        c(sessionStorageUtils.get("pwd"))
        c(sessionStorageUtils.get("age"))

        //c(sessionStorageUtils.del("age"))

        c(sessionStorageUtils.get("age"))
    }

    function test3(){
        localStorageUtils.set("name","a001");
        localStorageUtils.set("pwd","123456");
        localStorageUtils.set("age","23");

        c(localStorageUtils.get("name"))
        c(localStorageUtils.get("pwd"))
        c(localStorageUtils.get("age"))

        //c(localStorageUtils.del("age"))

        c(localStorageUtils.get("age"))
    }


    var cookieUtils = {
        set:function(name,value,expires,path,domain,secure){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

            if(expires instanceof Date){
                cookieText += "; expires=" + expires.toUTCString();
            }
            if(path){
                cookieText += "; path="+path;
            }
            if(domain){
                cookieText +="; domain="+domain;
            }
            if(secure){
                cookieText +="; "+secure;
            }

            document.cookie = cookieText;
            return true;

        },
        get:function(name){
            var cookieText = encodeURIComponent(name) + "=";
            var cookieValue = "";

            var start = document.cookie.indexOf(cookieText);

            if(start > -1){
                var end = document.cookie.indexOf(";",start);
                if(end == -1){
                    end = document.cookie.length;
                }

                cookieValue = encodeURIComponent(document.cookie.substring(start + cookieText.length,end));

            }
            return cookieValue;

        },
        del:function(name){
            this.set(name,"",new Date(0));
        }

    }

    var sessionStorageUtils = {
        set:function(name,value){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            sessionStorage.setItem(name,value);

            return true;

        },
        get:function(name){
            return sessionStorage.getItem(name);
        },
        del:function(name){
            sessionStorage.removeItem(name);
            return true;
        }
    }

    var localStorageUtils = {
        set:function(name,value){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            localStorage.setItem(name,value);

            return true;
        },
        get:function(name){
            return localStorage.getItem(name);
        },
        del:function(name){
            localStorage.removeItem(name);
            return true;
        }
    }


</script>

 

 

HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

HTML5 LocalStorage 本地存储

最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。

userData是IE的东西,垃圾。现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用。再之后Google推出了Gears,虽然没有限制,但不爽的地方就是要装额外的插件(没具体研究过)。到了HTML5把这些都统一了,官方建议是每个网站5MB,非常大了,就存些字符串,足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就5MB来考虑是比较妥当的。

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |