JavaScript advanced programming client storage learning notes

Chapter 2 client Storage
1. cookie
① It was originally used to store session information on the client.
1.1 restrictions
① Cookie is bound to a specific domain name in nature. When a cookie is set and a request is sent to the domain name that creates it, the cookie is contained.
② Cookie restrictions:
□Ie6 and earlier versions limit a maximum of 20 cookies for each domain name.
□Ie7 and later versions each domain name can have up to 50 cookies.
□Firefox50
□Opera50
□Safari and Chrome do not have hard rules
③ Cookie size limit: 4096 bytes (plus or minus 1) length limit. The size is limited to all cookies in a domain, not individual cookies.
1.2 cookie Components
Name, value, domain, path, expiration time, and security flag.
1.3 cookie in JavaScript
The JavaScript operation cookie uses the document. cookie attribute of BOM.
① When used to obtain attributes, document. cookie returns the strings of all available cookies on the current page, a series of name-value pairs separated by semicolons.
Name1 = value; name2 = value2; name3 = value3
All names and values are URL encoded, so decodeURIComponent () must be used for decoding.
② When setting the value, the document. cookie attribute can be set as a new cookie string. Setting document. cookie does not overwrite the cookie unless the specified cookie name already exists. You must use encodeURIComponent () encoding before setting.
③ There is no direct method to delete cookies. You need to use the same path, domain, and security options to set the cookie again, and set the expiration time to the past time.
□Cookie read, write, and rough functions:
Var CookieUtil = {
Get: function (name ){
Var cookieName = encodeURIComponent (name) + "= ",
CookieStart = document. cookie. indexOf (cookieName ),
CookieValue = null;
If (cookieStart>-1 ){
Var cookieEnd = document. cookie. indexOf (";", cookieStart)
If (cookieEnd =-1 ){
CookieEnd = document. cookie. length;
}
CookieValue = decodeURIComponent (document. cookie. substring (cookieStart + cookieName. length, cookieEnd ));
}
Return cookieValue;
},
Set: function (name, value, expires, path, domain, secure ){
Var cookieText = encodeURIComponent (name) + "=" + encodeURIComponent (value );
If (expires instanceof Date ){
CookieText + = "; expires =" + expires. toGMTString ();
}
If (path ){
CookieText + = "; path =" + path;
}
If (domain ){
CookieText + = "; domain =" + domian;
}
If (secure ){
CookieText + = "; secure ";
}
Document. cookie = cookieText;
},
Unset: function (name, path, domain, secure ){
This. set (name, "", new Date (0), path, domain, secure );
}
};
1.4 cookie
① A sub-cookie stores more small pieces of data in a single cookie. That is, the cookie value is used to store multiple name-value pairs.
Name = name1 = value1 & name2 = value2 & name3 = value3
□Operation cookie, get, getAll, set, setAll, unset, unsetAll:
Var subCookieUtil = {
Get: function (name, subName ){
Var subCookies = this. getAll (name );
If (subCookies ){
Return subCookies [subName];
} Else {
Return null;
}
},
GetAll: function (name ){
Var cookieName = encodeURIComponent (name) + "= ",
CookieStart = document. cookie. indexOf (cookieName ),
CookieValue = null,
Result = {};
If (cookieStart>-1 ){
Var cookieEnd = document. cookie. indexOf (";", cookieStart );
If (cookieEnd =-1 ){
CookieEnd = document. cookie. length;
}
CookieValue = document. cookie. substring (cookieStart + cookieName. length, cookieEnd );
If (cookieValue. length> 0 ){
Var subCookies = cookieValue. split ("&");
For (var I = 0, len = subCookies. length; I <len; I ++ ){
Var parts = subCookies [I]. split ("= ");
Result [decodeURIComponent (parts [0])] = decodeURIComponent (parts [1]);
}
Return result;
}
}
Return null;
},
Set: function (name, subName, value, expires, path, domain, secure ){
Var subCookies = this. getAll (name) || {};
Subcookies [subName] = value;
This. setAll (name, subcookies, expires, path, domain, secure );
},
SetAll: function (name, subcookies, expires, path, domain, secure ){
Var cookieText = encodeURIComponent (name) + "= ";
Var subcookieParts = new Array ();
For (var subName in subcookies ){
If (subName. length> 0 & subcookies. hasOwnProperty (subName )){
SubcookieParts. push (encodeURIComponent (subName) + "=" + encodeURIComponent (subcookies [subName]);
}
}
If (cookieParts. length> 0 ){
CookieText + = subcookieParts. join ("&");
If (expires instanceof Date ){
CookieText + = "; expires =" + expires. toGMTString ();
}
If (path ){
CookieText + = "; path =" + path;
}
If (domain ){
CookieText + = "; path" + path;
}
If (secure ){
CookieText + = "; secure ";
}
} Else {
CookieText + = "; expires =" + (new Date (0). toGMTString ();
}
Document. cookie = cookieText;
},
Unset: function (name, subName, path, domain, secure ){
Var subcookies = this. getAll (name );
If (subcookies ){
Delete subcookies [subName];
This. setAll (name, subcookies, null, path, domain, secure );
}
},
UnsetAll: function (name, path, domain, secure ){
This. setAll (name, null, new Date (0), path, domain, secure );
}
}
2. IE user data (not practical, omitted)
3. DOM storage mechanism
① Two targets of DOM Storage
□Provides a way to store session data outside of cookies.
□Provides a mechanism to store a large amount of data that can span sessions.
② Support:
□Firefox2 support
□Ie8 +, Safari3.1 +, Chrome1.0 +, and Firefox3.1 + are all implemented.
3.1 storage type
① The Storage type is used to store the name-value pairs with the maximum limit (different from the browser. The Storage instance has the same behavior as other objects, and there are the following additional methods.
□Clear (): delete all values.
□Getitem (name): obtains the corresponding value based on the specified name.
□Key (index): obtains the name of a specified digit.
□Removeitem (name): deletes the name-Value Pair specified by the name.
□Setitem (name, value): set a value for the specified name.
□Value can be accessed through attribute.
3.2 sessionStorage object
① SessionStorage objects store data specific to a session, that is, the data is only stored in the browser and closed. Data stored in sessionStorage can be refreshed across pages.
② The sessionStorage object is bound to a server session, so the file is unavailable during local running. Data stored in sessionStorage can only be accessed from the page where the data is originally stored for the object, and there are restrictions on multi-page applications.
③ SessionStorage objects are Storage-type instances.
3.3 globalStorage object
① Only implemented in Firefox2. Data is stored across sessions with specific access restrictions.
// Save data
GlobalStorage ["wrox.com"]. name = "Nicolas ";
// Obtain data
Var name = globalStorage ["wrox.com"]. name;
3.4 localStorage object
① No access rules can be specified on localStorage. The rules are set in advance. To access the same localStorage object, the page must come from the same domain name (the subdomain name is invalid) and use the same protocol on the same port.
② The data is retained to be deleted through JavaScript or the browser cache is cleared by the user.
Use Case:
LocalStorage. setItema ("name", "Nicolas ");
LocalStorage. book = "sion JavaScript ";
Var name = localStorage. getItem ("name ");
Var book = localStorage. book;
③ Compatible with globalStorage:
Function getLocalStorage (){
If (typeof localStorage = "object "){
Return localStorage;
} Else if (typeof globalStorage = "object "){
Retrun globalStorage [location, host];
} Else {
Throw new Error ("no localstorage ");
}
3.5 StorageItem type
① Each project stored in the Storage object is an instance of StorageItem.
□Value attribute: stored value.
□Secure attribute: This attribute can be set only when the script accesses the page using HTTPS protocol. The default value for https access is true.
3.6 storage event
If you modify a storage object, a storage event is triggered in the document. Its event object has the following attributes:
□Domain: The domain name for storing changes.
□Key: Specifies the key name to be set or deleted.
□Newvalue: the value of the key to be set. If it is deleted, it is null.
□Oldvalue: The value before the change.
3.7 restrictions
DOM storage restrictions are also related to browsers.