Set and get innerHTML

innerHTML:

Property sets or returns the HTML between the start and end tags of a table row

        function html(context, value){
            var doms = $$.$all(context);
            //Set up
            if(value){
                for(var i= 0,len= doms.length; i<len; i++){
                    doms[i].innerHTML = value;
                }
            }else{
                return doms[0].innerHTML
            }

        }

The introduction of cache framework

Generally, it means adding, deleting, modifying and querying. Its data structure can be as follows:

        var cache = {
            get:function(){},
            add:function(){},
            delete:function(){},
            update:function(){}
        }

The carrier is a json variable

 var cache = {
        data:[],
        //Get method: get value according to key
        get:function(key){
            var value = null;
            //Traverse to find key
            for(var i= 0,len=this.data.length;i<len; i++){
                var item = this.data[i]
                if (key == item.key) {
                    value = item.value;
                }
            }
            console.log('get'+value)
            return value;
        },
        //Add method
        add:function(key,value){
            var json= { key: key, value: value};
            this.data.push(json);
        },
        //Delete method
        delete:function(key){
            var status = false;
            for(var i= 0,len=this.data.length;i<len; i++){
                var item = this.data[i]
                // Loop array element
                if (item.key.trim() == key) {
                    this.data.splice(i, 1);//Start position, number of deletions
                    status = true;
                    break;
                }
            }
            return status;
        },
        //Update method
        update:function(key,value){
            var status = false;
            // Loop array element
            for(var i= 0,len=this.data.length;i<len; i++){
                var item = this.data[i]
                if (item.key.trim() === key.trim()) {
                    item.value = value.trim();
                    status = true;
                    break;
                }
            }
            return status;
        },

        isExist:function(key){
            for(var i= 0,len=this.data.length;i<len; i++){
                var item = this.data[i]
                if (key === item.key) {
                    return true;
                }else{
                    return false;
                }
            }
        }
    }

For specific examples, click to view the source code

What if we use cookie s as storage carriers?

realization:

    function setCookie(name,value,days,path){
                    var name = escape(name);
                    var value = escape(value);
                    var expires = new Date();
                    expires.setTime(expires.getTime() + days*24*60*60*1000);
                    path = path == "" ? "" : ";path=" + path;
                    _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
                    document.cookie = name + "=" + value + _expires + path;
                }

        //Get cookie value
        function getCookie(name){
            var name = escape(name);
            //Read cookie properties, which will return all cookies for the document
            var allcookies = document.cookie;

            //Find the start location of the cookie named name
            name += "=";
            var pos = allcookies.indexOf(name);
            //If a cookie with that name is found, extract and use its value
            if (pos != -1){                                             //If pos value is - 1, search "version =" failed
                var start = pos + name.length;                  //Where cookie values start
                var end = allcookies.indexOf(";",start);        //Search the location of the first ';' starting from the location where the cookie value starts, that is, the location where the cookie value ends
                if (end == -1) end = allcookies.length;        //If the end value is - 1, there is only one cookie in the cookie list
                var value = allcookies.substring(start,end);  //Extract cookie value
                return unescape(value);                           //Decode it
            }
            else return "";                                             //Search failed, return empty string
        }

        //delete cookie 
        function deleteCookie(name,path){
            var name = escape(name);
            var expires = new Date(0);
            path = path == "" ? "" : ";path=" + path;
            document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
        }

For specific examples, click to view the source code

Among them, the cookie may be unsafe by the browser based cookie, and the cookie has size display - 4KB