Всем привет! Сегодня я хочу рассмотреть очень популярный вопрос: как работать с куки? Везде предлагаются очень разные методы, но вот какой лучше? Определенного ответа на этот вопрос нет, но я хочу предложить очень удобный способ, и если ты заинтересовался — добро пожаловать под каст.
Делаем методы get_cookie, set_cookie и delete_cookie:
Отлично, чекаем эти методы, и впринципе, можно на этом закончить. Но это не то, к чему мы стремимся. Очень хочется сделать что-то вроде properties с#.
В javascript для этого есть очень удобный класс Proxy.
Если вкратце, то Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие.
Для работы с методами прокси создаем две лямбда-функции:
Теперь создаем сам класс Proxy, первый параметр которого — список методов класса, его укажем равному _cookie, но если вам не нужны сами методы работы с куки — укажите {}, второй параметр — тот самый __methods , который мы только что создали.
Отлично, теперь просто пишем простую строку:
УРА! мы создали класс, при вызове (get) свойств которого будет вызываться метод __methods .get, а при присвоении ему значения — __methods.set.
Пример использования:
Прошу любить и жаловать в комментариях )
И так, к делу
Делаем методы 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)});
Прошу любить и жаловать в комментариях )
Комментарии (7)
androidovshchik
24.10.2019 21:07-1Почему не typescript?
function(name,value,exp_y,exp_m,exp_d,path,domain,secure)
вот теперь разберись-ка)
Sirion
24.10.2019 23:24+1У меня от форматирования кода пальцы ног сжались.
А зачем, собственно, прокси? Почему не создать обёртку над куками любым другим способом?
leviaxma
Если браузер поддерживает Proxy, зачем использовать cookie, а не
localStorage?
Akuma
localStorage не передается на сервер
gfarniev
И ещё в localStoge нет HttpOnly
ReklatsMasters
И данные не инвалидируются автоматически.