1. Preface
Before, cookies were used in the form of document.cookies. Although the compatibility is good, it is troublesome. I am a person who prefers to make wheels, so I encapsulate a tool for cookies. For a long time, I like to write code, but not very much like to summarize texts, nor do I like to write some fragmentary things. It seems that I have to change it.
2. Ideas
(1) How to encapsulate and what to encapsulate
How to encapsulate: It is to use native js to encapsulate it into a tool, so that it can be used anywhere. Encapsulation against document.cookie is the best way to do it, and all operations are based on document.cookie.
What is encapsulated: encapsulated to exist as an object, and can be implemented using the getter & setter method.
(2) What methods of encapsulation
get(), set(name, value, opts), remove(name), clear(), getCookies(), etc. I personally think that encapsulating so many methods is enough to use cookies.
3. Action
(1) Understand cookies. The essence of cookies is HTTP cookies. Document.cookie when the object represented by the client is document. For more information, you can read the following code and comment
(2) The above code: These codes should be very intuitive and can be compressed together with the project code. I think the comments at the beginning of the following are the key points.
The code copy is as follows:
/*
* HTTP Cookies: Store session information
* Name and value must be RUL encoded when transmitting
* Cookie is bound to the specified domain name. Cookies cannot be shared without this domain, but they can share cookies to substations on the main site.
* Cookies have some restrictions: For example, IE6 & IE6-limited to 20; IE7 50; Opera 30... So cookies are usually set according to the requirements of [must]
* The name of the cookie is case-free; it is also recommended to encode the cookie URL; the path is a good way to distinguish cookies in different situations; the cookie with the security flag
* Send to the server in SSL case, but http will not. It is recommended to set expires, domain, and path for cookies; each cookie is less than 4KB.
* */
//For the encapsulation of cookies, use getter and setter methods to adopt getter and setter methods
(function(global){
//Get the cookie object, expressed as an object
function getCookiesObj(){
var cookies = {};
if(document.cookie){
var objs = document.cookie.split('; ');
for(var i in objs){
var index = objs[i].indexOf('='),
name = objs[i].substr(0, index),
value = objs[i].substr(index + 1, objs[i].length);
cookies[name] = value;
}
}
return cookies;
}
//Set cookies
function set(name, value, opts){
//opts maxAge, path, domain, secure
if(name && value){
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
//Optional parameters
if(opts){
if(opts.maxAge){
cookie += '; max-age=' + opts.maxAge;
}
if(opts.path){
cookie += '; path=' + opts.path;
}
if(opts.domain){
cookie += '; domain=' + opts.domain;
}
if(opts.secure){
cookie += '; secure';
}
}
document.cookie = cookie;
return cookie;
}else{
return '';
}
}
//Get cookies
function get(name){
return decodeURIComponent(getCookiesObj()[name]) || null;
}
//Clear a cookie
function remove(name){
if(getCookiesObj()[name]){
document.cookie = name + '=; max-age=0';
}
}
//Clear all cookies
function clear(){
var cookies = getCookiesObj();
for(var key in cookies){
document.cookie = key + '=; max-age=0';
}
}
//Get all cookies
function getCookies(name){
return getCookiesObj();
}
//Resolve conflict
function noConflict(name){
if(name && typeof name === 'string'){
if(name && window['cookie']){
window[name] = window['cookie'];
delete window['cookie'];
return window[name];
}
}else{
return window['cookie'];
delete window['cookie'];
}
}
global['cookie'] = {
'getCookies': getCookies,
'set': set,
'get': get,
'remove': remove,
'clear': clear,
'noConflict': noConflict
};
})(window);
(3) example
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie example</title>
</head>
<body>
<script type="text/javascript" src="cookie.js" >/script>
<script type="text/javascript">
console.log('--------------------------------------------------------);
console.log(cookie);
console.log('--------------------------------------------------------------------------------------------------------------------------
console.log(cookie.getCookies());
console.log('--------------------------------------------------------------);
console.log(cookie.set('name', 'wlh'));
console.log('-----------------------------------------------------------------------);
console.log(cookie.set('name', 'wlh123'));
console.log('----------------------------------------------------------------------------);
console.log(cookie.set('age', 20));
console.log('----------------------------------------------------------);
console.log(cookie.get('name'));
console.log('---------------------------------------------------------------------);
console.log(cookie.getCookies());
console.log('-----------------------------------------------------------------------);
console.log(cookie.remove('age'));
console.log('---------------------------------------------------------------------);
console.log(cookie.getCookies());
console.log('------------------------------------------------------------------------);
console.log(cookie.clear());
console.log('---------------------------------------------------------------------);
console.log(cookie.getCookies());
console.log('------------------------------------------------------------------------);
var $Cookie = cookie.noConflict(true /*a new name of cookie*/);
console.log($Cookie);
console.log('-----------------------------------------------------------------);
console.log($Cookie.getCookies());
</script>
</body>
</html>
(4) Code address: https://github.com/vczero/cookie