JavaScript Advanced Programming Client Storage Learning notes _javascript Tips

19th Chapter Client Storage
1.cookie
① was originally used by the client to store session information.
1.1 Limit
①cookie are bound to a specific domain name in nature. This cookie is included when a cookie is set and a request is sent to the domain name where it was created.
②cookie Restrictions:
-ie6 and lower versions limit up to 20 cookies per domain.
-ie7 and later versions each domain name up to 50 cookies.
-firefox50 A
-opera50 A
-safari and Chrome have no hard rules
③cookie size limit: 4096 bytes (plus minus 1) length limit. Dimensions are limited to all cookies in a domain, not individual cookies.
The ingredients of a 1.2 cookie
Name, value, domain, path, expiration time, security flag.
Cookies in 1.3 JavaScript
The JavaScript action cookie is the Document.cookie property of the BOM.
① when used to get properties, Document.cookie returns a string of all cookies available on the current page, a series of name-value pairs separated by semicolons.
Name1=value;name2=value2;name3=value3
All names and values are encoded by URL, so you must use decodeURIComponent () to decode them.
When ② is used to set a value, the Document.cookie property can be set to a new cookie string. Setting Document.cookie does not overwrite cookies unless the cookie name you set already exists. The encodeURIComponent () encoding must be used before setting.
③ there is no direct way to delete cookies. You need to set the cookie again with the same path, domain, and security options, and set the expiration time to the past time.
-cookie read, write, and Hill features:
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 Child Cookies
A ① cookie is data that holds a smaller segment of a single cookie. That is, a cookie value is used to store multiple name-value pairs.
Name=name1=value1&name2=value2&name3=value3
-Operator 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 + = ";p ath=" + path;
}
if (domain) {
Cookietext + = ";p ath" + 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 very practical, slightly)
3.DOM storage mechanism
①dom Storage Two targets
-Provides a way to store session data outside of cookies.
-Provides a mechanism for storing a large number of data that can exist across sessions.
② Support Situation:
-firefox2 Support Section
-ie8+, safari3.1+, chrome1.0+, firefox3.1+ all realized.
3.1 Storage Type
The ①storage type is used to store name-value pairs of the maximum limit, which varies by browser. Storage instance and other object behavior, there are the following additional methods.
-clear (): Deletes all values.
-getitem (name): Gets the corresponding value based on the name specified.
-key (Index): Gets the name of the location in the specified numeric position.
-removeitem (name): Deletes the name-value pairs specified by the first name.
-setitem (name, value): sets a corresponding value for the specified name.
-You can access values through properties.
3.2 Sessionstorage Object
The ①sessionstorage object stores data specific to a session, or the data is saved only to browser shutdown. Data stored in Sessionstorage can exist across page refreshes.
The ②sessionstorage object is bound to a server session, so the file is not available when it is run locally. Data stored in Sessionstorage can only be accessed by pages that initially store data to the object, with restrictions on multiple page applications.
The ③sessionstorage object is an instance of the storage type.
3.3 Globalstorage Object
① is only implemented in Firefox2. Data is stored across sessions and has specific access restrictions.
Save data
globalstorage["wrox.com"].name = "Nicholas";
Get Data
var name = globalstorage["Wrox.com"].name;
3.4 Localstorage Object
No access rules can be specified on the ①localstorage, and the rules are set beforehand. In order to access the same Localstorage object, the page must come from the same domain name (invalid subdomain), using the same protocol, on the same port.
② data remains to be deleted through JavaScript or the user clears the browser cache.
Case:
Localstorage.setitema ("name", "Nicholas");
Localstorage.book = "Profession JavaScript";
var name = Localstorage.getitem ("name");
var book = Localstorage.book;
③ compatible 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
Every item stored in the ①storage object is an instance of StorageItem
-value property: The value that is stored.
-secure property: Only scripts that use the HTTPS protocol to access the page can be set. Through HTTPS access defaults to TRUE.
3.6 Storage Event
Modifying a storage object triggers the storage event on the document. Its event object has the following properties:
-domain: The domain name of the store that made the change.
-key: A key name that is set or deleted.
-newvalue: The value to which the key will be set, or null if it is deleted.
-oldvalue: The value before being changed.
3.7 Limit
The limitations of DOM storage are also associated with browsers.