JavaScript advanced programming client storage study notes_javascript skills

Chapter 19 Client Storage
1. Cookie
① was originally used to store session information on the client side.
1.1 Limitations
①Cookies are bound to a specific domain name by nature. When a cookie is set, this cookie will be included when sending a request to the domain name where it was created.
②Cookie limitations:
□IE6 and lower versions limit a maximum of 20 cookies per domain name.
□IE7 and later versions have a maximum of 50 cookies per domain name.
□Firefox 50
□Opera 50
□Safari and Chrome have no hard and fast rules
③Cookie size limit: 4096 bytes (plus or minus 1) length limit. Limit the size to all cookies under a domain, rather than limiting each cookie individually.
1.2 Components of cookies
Name, value, domain, path, expiration time, security flag.
1.3 Cookies in JavaScript
JavaScript operates cookies through the document.cookie attribute of the BOM.
①When used to obtain attributes, document.cookie returns the 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 URL encoded, so they must be decoded using decodeURIComponent().
②When used to set a value, the document.cookie attribute can be set to a new cookie string. Setting document.cookie will not overwrite the cookie unless the cookie name already exists. Must be encoded with encodeURIComponent() before setting.
③There is no direct way to delete cookies. The cookie needs to be set again using the same path, domain, and security options, with the expiration time set to the past.
□cookie reading, writing and downloading 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 Sub-cookie
① Sub-cookie stores smaller pieces of data in a single cookie. That is, use cookie values ​​to store multiple name-value pairs.
name=name1=value1&name2=value2&name3=value3
□操作子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; ivar 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用户数据（不太实用，略之）
3.DOM存储机制
①DOM存储两个目标
□提供一种在cookie之外存储会话数据的途径。
□提供一种存储大量可以跨越会话存在的数据的机制。
②支持情况：
□Firefox2支持部分
□IE8 、Safari3.1 、Chrome1.0 、Firefox3.1 全部实现。
3.1 存储类型
①Storage类型用来存储最大限（因浏览器而异）的名值对。Storage的实例和其他对象行为一样，有下列额外的方法。
□clear()：删除所有值。
□getItem(name)：根据指定的名字name获取相应的值。
□key(index)：在指定的数字位置获取该位置的名字。
□removeItem(name)：删除由名字name指定的名值对。
□setItem(name, value)：为指定的名字name设置一个对应的值。
□可通过属性访问值。
3.2 sessionStorage对象
①sessionStorage对象存储特定于某个会话的数据，也即数据只保存到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在。
②sessionStorage对象绑定于某个服务器会话，所以文件在本地运行时不可用。存储在sessionStorage中数据只能由最初给对象存储数据的页面访问到，对多页面应用有限制。
③sessionStorage对象是Storage类型的实例。
3.3 globalStorage对象
①只在Firefox2中实现。跨越会话存储数据，并且有特定的访问限制。
//保存数据
globalStorage["wrox.com"].name = "Nicholas";
//获取数据
var name = globalStorage["wrox.com"].name;
3.4 localStorage对象
①localStorage上不能指定任何访问性规则；规则事先设定好了。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
②数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
Use case:
localStorage.setItema("name","Nicholas");
localStorage.book = "Profession 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
①Every item stored in the Storage object is an instance of StorageItem
□value attribute: the stored value.
□secure attribute: It can be set only if the script uses the HTTPS protocol to access the page. Access via https defaults to true.
3.6 storage event
Modifying the storage object will trigger a storage event on the document. Its event object event has the following attributes:
□domain: The domain name of the storage where changes are made.
□key: The key name for setting or deleting.
□newValue: The value to set the key to, or null if it is deleted.
□oldValue: The value before it was changed.
3.7 Limitations
The limitations of DOM storage are also related to the browser.