Работаем с куки как с классом javascript / Хабр

Всем привет! Сегодня я хочу рассмотреть очень популярный вопрос: как работать с куки? Везде предлагаются очень разные методы, но вот какой лучше? Определенного ответа на этот вопрос нет, но я хочу предложить очень удобный способ, и если ты заинтересовался — добро пожаловать под каст.

И так, к делу

Делаем методы get_cookie, set_cookie и delete_cookie:

Код

var _cookie = {
        get_cookie:function(cookie_name){
         var r=document.cookie.match('(^|;) ?'+cookie_name+'=([^;]*)(;|$)');
         return r?unescape(r[2]):null
    },
    delete_cookie:function(cookie_name){
        var c=new Date();
        c.setTime(c.getTime()-1);
        document.cookie=cookie_name+="=; expires="+c.toGMTString()
    },
    set_cookie:function(name,value,exp_y,exp_m,exp_d,path,domain,secure){
        var c=name+"="+escape(value);
        if(exp_y){
            var expires=new Date(exp_y,exp_m,exp_d);
            c+="; expires="+expires.toGMTString()
       }
       if(path)c+="; path="+escape(path);
       if(domain)c+="; domain="+escape(domain);
       if(secure)c+="; secure";
       document.cookie=c;
        }
}

Отлично, чекаем эти методы, и впринципе, можно на этом закончить. Но это не то, к чему мы стремимся. Очень хочется сделать что-то вроде properties с#.

В javascript для этого есть очень удобный класс Proxy.

Если вкратце, то Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие.

Для работы с методами прокси создаем две лямбда-функции:

Код

var __methods = {
   get:(t,m)=>m in t?t[m]:_cookie.get_cookie(m),
    set:(t,m,v)=>v?_cookie.set_cookie(m,v):_cookie.delete_cookie(m)
}

Теперь создаем сам класс Proxy, первый параметр которого — список методов класса, его укажем равному _cookie, но если вам не нужны сами методы работы с куки — укажите {}, второй параметр — тот самый __methods , который мы только что создали.

Отлично, теперь просто пишем простую строку:

var cookie = new Proxy(_cookie,__methods);

УРА! мы создали класс, при вызове (get) свойств которого будет вызываться метод __methods .get, а при присвоении ему значения — __methods.set.

Пример использования:

Код

var name= prompt("введите имя куки","my_name");
var value= parseFloat(prompt("Введите значения куки ( float )","103"));
cookie[name] = value;
if(value<100) cookie[name]+=10;
else cookie[name]-=10;
//любые другие действия
alert("Отлично, значение "+name+" = "+value+" сохранено в куки!"+"\nВот все куки:\n"+document.cookie);

Полный код:

var _cookie = {
    get_cookie:function(cookie_name){
        var r=document.cookie.match('(^|;) ?'+cookie_name+'=([^;]*)(;|$)');
        return r?unescape(r[2]):null
    },
    delete_cookie:function(cookie_name){
        var c=new Date();
        c.setTime(c.getTime()-1);
        document.cookie=cookie_name+="=; expires="+c.toGMTString()
    },
    set_cookie:function(name,value,exp_y,exp_m,exp_d,path,domain,secure){
        var c=name+"="+escape(value);
        if(exp_y){
            var expires=new Date(exp_y,exp_m,exp_d);
            c+="; expires="+expires.toGMTString()
        }
        if(path)c+="; path="+escape(path);
        if(domain)c+="; domain="+escape(domain);
        if(secure)c+="; secure";
        document.cookie=c;
    }
};
var __methods = {
    get:(t,m)=>m in t?t[m]:_cookie.get_cookie(m),
    set:(t,m,v)=>v?_cookie.set_cookie(m,v):_cookie.delete_cookie(m)
};
var cookie = new Proxy(_cookie,__methods);

Сжатый код:

var _c={g:function(d){var c=document.cookie.match("(^|;) ?"+d+"=([^;]*)(;|$)");return c?unescape(c[2]):null},d:function(d){var c=new Date;c.setTime(c.getTime()-1),document.cookie=d+="=; expires="+c.toGMTString()},s:function(k,r,i,a,n,q,o,c){var e=k+"="+escape(r);i&&(e+="; expires="+new Date(i,a,n).toGMTString());q&&(e+="; path="+escape(q)),o&&(e+=";domain="+escape(o)),c&&(e+="; secure"),document.cookie=e}},cookie=new Proxy({get_cookie:_c.g,delete_cookie:_c.d,det_cookie:_c.s},{get:(d,c)=>c in d?d[c]:_c.g(c),set:(e,c,f)=>f?_c.s(c,f):_c.d(c)});

Прошу любить и жаловать в комментариях )