Home Web Front-end JS Tutorial Summary of JavaScript encapsulation of Cookie operations_javascript skills

Summary of JavaScript encapsulation of Cookie operations_javascript skills

May 16, 2016 pm 06:37 PM
cookie javascript operate

Javascript does not have keywords for private and public access rights settings, but you can simulate the same result through certain techniques.
First, let’s look at the following line of code:
var i = (1, 2, 3, 4 , 5);
The final result of variable i is 5.
This is the result of the comma operator, which means that the last value is returned. The parentheses change the priority of this line of code, otherwise var i = 1, 2, 3, 4, 5; will report an error of missing identifier.


var i = (1, 2, 3, 4, function(){ return 5 * 5;});
The final result of variable i is a function, returning the result 25.
This is the flexibility of Javascript, which can assign any type without having to declare it in advance. Now we can make the following call:

i ();
alert( i() );
to get a method call that returns 25.


We continue, the variable i gets the reference of the function through the assignment operator, In other words, the reference to the last result returned after the operation of the parentheses on the right side of the equal sign is still there. Although we cannot display the call, it does exist. What if it is called without a reference to a variable?

(1, 2, 3, 4, function(){ alert(5 * 5);})()
After the above code is executed, a message box pops up, displaying 25.
For the convenience of display, I The function in the previous example was changed to a pop-up message box.
Two pairs of parentheses () (); The first pair indicates that a result is returned. If the result is a function, the call is made by the second pair of parentheses.
That is, the reference to the anonymous function occurs through the previous pair of brackets for reference below. This is the call to the anonymous function.
For more information on the use of anonymous functions, please refer to the reference link at the end of the article.

The reason why closures are generated is because of the different scopes. The child scope refers to the variables of the parent scope and returns to the child scope. Logically speaking, the parent scope should be destroyed after execution, but the child scope It has always existed and has a reference to the parent scope, so it has been retained.
Look at the following code

Copy the code The code is as follows:

function parent() {
var a = 1;
function child(){
var b = 2;
alert(a) ;
alert(b);
}
}

The parent function parent contains a child function, and in the child function there is a reference to the a variable in the parent function Reference (output its value).
Let’s let the parent function return its declared child function after execution
Copy code The code is as follows:

function parent() {
var a = 1;
function child(){
var b = 2;
alert(a);
alert(b);
}
return child;
}
var t = parent();
t();

on line 10 , we executed the parent function and returned the function child declared inside the function. At this time, the variable t holds a reference to the returned object (which is an executable function at this time), and we called it in 11 lines of code. The results are output 1 and 2 respectively.
Note that the output 2 is because we declared a variable in the sub-function body, and the output 1 is because we did not define the variable a correspondingly in the function body, but an exchange occurred. The reference to the variable in the parent function, that is to say, the variable in the parent scope is referenced.
At this time, the output can be completed, which means that the variable a still exists. But we cannot directly reference it (such as parent .a), because the function has been executed and there is no corresponding reference, we can only access it through the reference of the returned sub-function.
What if I declare other variables in the parent function? Result It’s the same, the sub-function can be accessed, but if the sub-function does not return the corresponding reference, we cannot access it from the outside at all. This forms a closure.

What can a closure do? What should you do if you have a variable that you don’t want the outside world to modify at will? Then use a closure.
Copy code The code is as follows :

myObj = {}; //Declare a global variable, which is a property of a window object (window.myObj)
(function(){
var i = 4;
myObj = { //Reference global variables and assign values ​​to them
getI : function() { //get method, a function
return i;
},
setI : function( val) { //set method, setting limit value
if(val > 100) {
alert("i connt > 100");
return;
}
i = val;
}
}
})(); //The call of the anonymous function is also a function, so it is used as a sub-scope and is destroyed after execution to avoid code pollution
myObj.setI(5); //Success
myObj.setI(101); //Failure
alert(myObj.getI());
alert(myObj.i); //Error, There is no such attribute


So far we have simply implemented public access rights and private access rights (that is, giving you what you want, and not giving you what you don’t want to give you)



In In the page, we usually use the document.cookie attribute to access it. Assigning a new value to it will create a new Cookie. A Cookie usually has five attributes: value (stored value), date (time in UTC format, what does it represent) Time expiration, domain (domain, cookie owner), Path (subdirectory).
In normal development, if you only use the document.cookie attribute to access, it will be very troublesome, because you can only assign characters to it String, and the string must be cut after reading to obtain the value of the specified variable name. When document.cookie is read, all assigned values ​​are returned, excluding information such as expiration time, domain, etc. It can be set independently again.
The code is attached below, all encapsulated into the Cookie global object, exposing several methods.
Get: Put back all the specified cookie strings.
Set: Set the cookie string .
Clear: Clear all cookie objects.
GetDayTime: Get the Date object specifying the val day from now.
Write: Write cookies. Overloaded. See code for details.
Query: Query cookies. Overloaded. See code for details.
Update: Modify cookies.
Delete: Delete cookies.


Code 1-7
Copy code The code is as follows:

Cookie = {};
/*
* The setTime method of the Date object is to set the number of milliseconds since 1970-01-01, set it in the object, and return the date since then The number of milliseconds instead of the original object.
* If the cookie does not set the expires attribute, or the expires time is less than the local time, it will expire on the next browse.
* The document.cookie object returns all values String form, does not include expires or others.
*
*/
(function() {
var nDay = 24 * 60 * 60 * 1000;
var isString = function(v ) {
return typeof v === "string";
}
var isArray = function(v) {
return Object.prototype.toString.apply(v) == "[object Array ]";
}
var isObject = function(v) {
return v && typeof v == "object";
}
var isDate = function(v) {
return Object.prototype.toString.apply(v) == "[object Date]";
}
var getTime = function() {
return new Date().getTime();
}
var trim = function(val) {
return (val || "").replace(/^s |s $/g, "");
}
var tryEval = function (val) {
var Obj, e;
try {
Obj = eval(val);
} catch (e) {
Obj = val;
}
return Obj;
}
var ObjectToString = function(o) {
var tstr = "{";
for (var v in o) {
if (isArray(o[v] )) {
tstr = v ":" ArrayToString(o[v]) ",";
} else if (isObject(o[v])) {
tstr = v ":" ObjectToString( o[v]) ",";
} else if (isString(o[v])) {
tstr = v ":"" o[v].toString() "",";
} else {
tstr = v ":" o[v].toString() ",";
}
}
return tstr.slice(0, -1) "}";
}
var ArrayToString = function(o) {
var tstr = "[";
for (var v in o) {
if (isArray(o[v])) {
tstr = ArrayToString(o[v]) ",";
} else if (isObject(o[v])) {
tstr = ObjectToString(o[v]) ",";
} else {
tstr = o[v].toString() ",";
}
}
return tstr.slice(0, -1) "]"; ;
}
Cookie = {
Get: function() {
return document.cookie;
},
Set: function(val) {
document.cookie = val;
},
Clear: function() {
var temp = this.Query();
var o;
for (o in temp) {
this.Delete(o);
}
},
GetDayTime: function(val) {
var texpires = new Date();
texpires.setTime(texpires.getTime() val * nDay);
return texpires;
},
Write: function() {
/*
* Cookie.Write(Object); Write object, name is main;
* Cookie.Write(varname , Object); varname: variable name, Object: write object;
* Cookie.Write(Object, Date); Object: write object, Date: expiration time;
* Cookie.Write(varname, Object , Date); varname: variable name, Object: write object, Date: expiration time;
* Cookie.Write(varname, Object, Date, Domain, Path); varname: variable name, Object: write object, Date: expiration time, Domain: domain, Path: subdirectory;
*/
if (arguments.length == 1) {
var tvalue = arguments[0];
var tstr = " ";
var texpires = new Date(); texpires.setTime(texpires.getTime() 1 * nDay);
if (isArray(tvalue)) {
tstr = ArrayToString(tvalue);
} else if (isObject(tvalue)) {
tstr = ObjectToString(tvalue);
} else {
tstr = tvalue.toString();
}
tstr = "main= " escape(tstr) ";expires=" texpires.toGMTString() ";";
} else if (arguments.length == 2) {
var tname, tvalue, texpires, tstr = "";
if (isDate(arguments[1])) {
tname = "main";
tvalue = arguments[0];
texpires = arguments[1];
} else {
tname = arguments[0];
tvalue = arguments[1];
texpires = new Date(); texpires.setTime(texpires.getTime() 1 * nDay);
}
if (isArray(tvalue)) {
tstr = ArrayToString(tvalue);
} else if (isObject(tvalue)) {
tstr = ObjectToString(tvalue);
} else {
tstr = tvalue.toString();
}
tstr = tname "=" escape(tvalue) ";expires=" texpires.toGMTString() ";";
} else if (arguments.length == 3) {
var tname = arguments[0], tvalue = arguments[1], texpires = arguments[2], tstr = "";
if (isArray(tvalue)) {
tstr = ArrayToString (tvalue);
} else if (isObject(tvalue)) {
tstr = ObjectToString(tvalue);
} else {
tstr = tvalue.toString();
}
tstr = tname "=" escape(tvalue) ";expires=" texpires.toGMTString() ";";
} else if (arguments.length == 5) {
var tname = arguments[0] , tvalue = arguments[1], texpires = arguments[2], tdomain = arguments[3], tpath = arguments[4], tstr = "";
if (isArray(tvalue)) {
tstr = ArrayToString(tvalue);
} else if (isObject(tvalue)) {
tstr = ObjectToString(tvalue);
} else {
tstr = tvalue.toString();
}
tstr = tname "=" escape(tvalue) ";expires=" texpires.toGMTString() ";domain=" tdomain ";path=" tpath ";";
}
alert(tstr);
this.Set(tstr);
},
Query: function() {
/*
* Cookie.Query(); Returns an Object composed of all Cookie values;
* Cookie.Query(string); Returns an Object with the specified name; If it fails, it returns undefined;
* Cookie.Query(string, Object); Writes an Object with the specified name for the specified object and returns; If it fails, it returns undefined;
*/
var tname = tvalue = " ", tright = -1;
var tstr = this.Get();
var tObj = {};
if (arguments.length == 0) {
var i = 0;
do {
tname = trim(tstr.slice(i, tstr.indexOf("=", i)));
tright = tstr.indexOf(";", i);
if (tright == -1) {
tvalue = unescape(tstr.slice(tstr.indexOf("=", i) 1, tstr.length));
} else {
tvalue = unescape( tstr.slice(tstr.indexOf("=", i) 1, tright));
}
tObj[tname] = tryEval(tvalue);
i = tstr.indexOf(";", i) == -1 ? -1 : tstr.indexOf(";", i) 1;
} while (i != -1);
} else {
tname = arguments[0] ;
if (tstr.indexOf(tname) == -1) return undefined;
var i = tstr.indexOf(tname);
tname = trim(tstr.slice(i, tstr.indexOf( "=", i)));
tright = tstr.indexOf(";", tstr.indexOf(tname)) == -1 ? tstr.length : tstr.indexOf(";", tstr.indexOf( tname));
tvalue = unescape(tstr.slice(tstr.indexOf(tname) tname.length 1, tright));
if (arguments.length == 1) {
tObj = tryEval( tvalue);
} else if (arguments.length == 2) {
tObj = arguments[1];
tObj[tname] = tryEval(tvalue);
}
}
return tObj;
},
Update: function() {
return this.Write.apply(this, arguments);
},
Delete: function() {
if (arguments.length == 1) {
var varname = arguments[0];
if (this.Query(varname)) {
this.Update(varname, "", new Date( 1970, 01, 01));
}
}
}
}


There is an execution of eval from string to object, and from The Object or Array object obtains the corresponding function function in the form of a string, simulating some JSON operations. Of course, it cannot store all JavaScript objects, only a part of them are satisfied, and I feel it is enough.


My personal understanding is limited, please give me some advice.
Javascript’s anonymous function: http://dancewithnet.com/2008/05/07/javascript-anonymous-function/
Javascript closure: http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.html
Cookie File format: http://www.cnblogs.com/sephil/archive/2008/05/06/cookiefmt.html
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PyCharm usage tutorial: guide you in detail to run the operation PyCharm usage tutorial: guide you in detail to run the operation Feb 26, 2024 pm 05:51 PM

PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc

What is sudo and why is it important? What is sudo and why is it important? Feb 21, 2024 pm 07:01 PM

sudo (superuser execution) is a key command in Linux and Unix systems that allows ordinary users to run specific commands with root privileges. The function of sudo is mainly reflected in the following aspects: Providing permission control: sudo achieves strict control over system resources and sensitive operations by authorizing users to temporarily obtain superuser permissions. Ordinary users can only obtain temporary privileges through sudo when needed, and do not need to log in as superuser all the time. Improved security: By using sudo, you can avoid using the root account during routine operations. Using the root account for all operations may lead to unexpected system damage, as any mistaken or careless operation will have full permissions. and

Linux Deploy operation steps and precautions Linux Deploy operation steps and precautions Mar 14, 2024 pm 03:03 PM

LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install

What to do if you forget to press F2 for win10 boot password What to do if you forget to press F2 for win10 boot password Feb 28, 2024 am 08:31 AM

Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.

Huawei Mate60 Pro screenshot operation steps sharing Huawei Mate60 Pro screenshot operation steps sharing Mar 23, 2024 am 11:15 AM

With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:

PHP PDO Tutorial: An Advanced Guide from Basics to Mastery PHP PDO Tutorial: An Advanced Guide from Basics to Mastery Feb 19, 2024 pm 06:30 PM

1. Introduction to PDO PDO is an extension library of PHP, which provides an object-oriented way to operate the database. PDO supports a variety of databases, including Mysql, postgresql, oracle, SQLServer, etc. PDO enables developers to use a unified API to operate different databases, which allows developers to easily switch between different databases. 2. PDO connects to the database. To use PDO to connect to the database, you first need to create a PDO object. The constructor of the PDO object receives three parameters: database type, host name, database username and password. For example, the following code creates an object that connects to a mysql database: $dsn="mysq

How to find cookies in your browser How to find cookies in your browser Jan 19, 2024 am 09:46 AM

In our daily use of computers and the Internet, we are often exposed to cookies. A cookie is a small text file that saves records of our visits to the website, preferences and other information. This information may be used by the website to better serve us. But sometimes, we need to find cookie information to find the content we want. So how do we find cookies in the browser? First, we need to understand where the cookie exists. in browser

PHP string manipulation: a practical way to effectively remove spaces PHP string manipulation: a practical way to effectively remove spaces Mar 24, 2024 am 11:45 AM

PHP String Operation: A Practical Method to Effectively Remove Spaces In PHP development, you often encounter situations where you need to remove spaces from a string. Removing spaces can make the string cleaner and facilitate subsequent data processing and display. This article will introduce several effective and practical methods for removing spaces, and attach specific code examples. Method 1: Use the PHP built-in function trim(). The PHP built-in function trim() can remove spaces at both ends of the string (including spaces, tabs, newlines, etc.). It is very convenient and easy to use.

See all articles