JavaScript 고급 프로그래밍 클라이언트 스토리지 연구 노트_javascript 기술

Chapter 19 클라이언트 저장
1. 쿠키
①는 원래 클라이언트 측에서 세션 정보를 저장하는 데 사용되었습니다.
1.1 제한사항
①쿠키는 본질적으로 특정 도메인 이름에 바인딩됩니다. 쿠키가 설정되면 쿠키가 생성된 도메인 이름으로 요청을 보낼 때 이 쿠키가 포함됩니다.
②쿠키 제한:
□IE6 이하 버전에서는 도메인 이름당 최대 20개의 쿠키를 제한합니다.
□IE7 이상 버전에서는 도메인 이름당 최대 50개의 쿠키를 사용할 수 있습니다.
□Firefox 50
□Opera 50
□Safari와 Chrome에는 엄격하고 빠른 규칙이 없습니다.
3쿠키 크기 제한: 4096바이트(더하기 또는 빼기 1) 길이 제한. 각 쿠키를 개별적으로 제한하는 대신 도메인 아래의 모든 쿠키로 크기를 제한합니다.
1.2 쿠키의 구성요소
이름, 값, 도메인, 경로, 만료시간, 보안 플래그.
1.3 JavaScript의 쿠키
JavaScript는 BOM의 document.cookie 속성을 통해 쿠키를 작동합니다.
①속성을 얻는 데 사용되는 경우 document.cookie는 현재 페이지에서 사용할 수 있는 모든 쿠키의 문자열을 세미콜론으로 구분된 일련의 이름-값 쌍으로 반환합니다.
name1=value;name2=value2;name3=value3
모든 이름과 값은 URL 인코딩되어 있으므로 decodeURIComponent()를 사용하여 디코딩해야 합니다.
②값을 설정하는 데 사용되는 경우 document.cookie 속성을 새로운 쿠키 문자열로 설정할 수 있습니다. document.cookie를 설정하면 쿠키 이름이 이미 존재하지 않는 한 쿠키를 덮어쓰지 않습니다. 설정하기 전에 encodeURIComponent()로 인코딩해야 합니다.
③쿠키를 직접 삭제할 수 있는 방법은 없습니다. 동일한 경로, 도메인 및 보안 옵션을 사용하여 쿠키를 다시 설정해야 하며 만료 시간은 과거로 설정되어야 합니다.
□쿠키 읽기, 쓰기, 다운로드 기능:
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 : 함수(이름, 값, 만료, 경로, 도메인, 보안){
var cookieText = encodeURIComponent(name) "=" encodeURIComponent(value)
if( Date의 인스턴스가 만료됨){
cookieText = ";expires="expires.toGMTString();
}
if(path){
cookieText = "; path=" path; 🎜>if(도메인){
cookieText = "; domain=" domian;
}
if(보안){
cookieText = "; secure"; cookie = cookieText;
},
unset : function(이름, 경로, 도메인, 보안){
this.set(이름, "", 새 날짜(0), 경로, 도메인, 보안);
}
};
1.4 하위 쿠키
① 하위 쿠키는 단일 쿠키에 더 작은 데이터 조각을 저장합니다. 즉, 쿠키 값을 사용하여 여러 이름-값 쌍을 저장합니다.
name=name1=value1&name2=value2&name3=value3
□操작동cookie，get、getAll、set、setAll、unset、unsetAll：
var subCookieUtil = {
get : 함수(이름, 하위 이름) {
var subCookies = this.getAll(이름);
if(subCookies){
return subCookies[subName];
}else{
null을 반환합니다.
}
},
getAll : 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 = 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("=");
결과[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
결과 반환;
}
}
null을 반환합니다.
},
설정 : 함수(이름, 하위 이름, 값, 만료, 경로, 도메인, 보안){
Var subCookies = this.getAll(이름) || {};
하위 쿠키[subName] = 값;
This.setAll(이름, 하위 쿠키, 만료, 경로, 도메인, 보안);
},
setAll : 함수(이름, 하위 쿠키, 만료, 경로, 도메인, 보안){
var cookieText = encodeURIComponent(name) "=";
var subcookieParts = new Array();
for(하위 쿠키의 var subName){
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(경로){
cookieText = ";path=" 경로;
}
if(domain){
cookieText = ";path" 경로;
}
if(보안){
cookieText = ";보안";
}
}else{
cookieText = ";expires=" (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset : function(name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if(하위 쿠키){
하위 쿠키[하위 이름] 삭제;
this.setAll(이름, 하위 쿠키, null, 경로, 도메인, 보안);
}
},
unsetAll : function(name, path, domain, secure){
this.setAll(name, null, new Date(0), path, domain, secure);
}
}
2.IE사용户数据（불태实用,略之）
3.DOM存储机제
①DOM存储两个目标
□提供一种재쿠키지外存储会话数据的途径.
□提供一种存储大weight可以跨越会话存는 数据的机机机况.
②支持情况:
Firefox2支持부분
□IE8 、Safari3.1 、Chrome1 .0 、Firefox3.1 전체 기능.
3.1 버전
1Storage类型용 来存储最大限（因浏览器而异）의 이름은 Storage의 이름입니다.对象行为一样，有下列额external 방법.
□clear(): 删除所有值.
□getItem(name): 根据指정의 이름 이름 获取상应의 值.
□key(index): 指定的数字位置获取该位置이름.
□removeItem(name): 删除由이름자 이름은 사용자 정의 이름입니다.
□setItem(이름, 값): 为指사용자 이름 이름은 设置一个对应적입니다.
□可通过属性访问值.
3.2 sessionStorage对象
1sessionStorage对象存储特定于某个会话的数据，也即数据只保存到浏览器关闭。存储insessionStorage中的数据可以跨越页face刷new而存在。
②sessionStorage는 현재 세션 저장소에서 고정적으로 사용되지 않습니다.页face访问到，对多页face应用有限是
③sessionStorage对象是Storage는 일종의 유형입니다.
3.3 globalStorage는
1.Firefox2中实现에서 사용합니다.据
globalStorage["wrox.com" ].name = "니콜라스";
//获取数据
var name = globalStorage["wrox.com"].name;
3.4 localStorage对象
①localStorage 상급이 불가능합니다.须来自同一个域name(子域name无效),使用同一种协议，같은 일이 함께 합니다.
②数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
사용 사례:
localStorage.setItema("name","Nicholas");
localStorage.book = "Profession JavaScript";
var name = localStorage.getItem("name"); 🎜 >var book = localStorage.book;
③globalStorage와 호환 가능:
function getLocalStorage(){
if(typeof localStorage == "object"){
return localStorage
}else if; ( typeof globalStorage == "object"){
rerun globalStorage[location,host];
}else{
throw new Error("no localstorage");
3.5 StorageItem 유형
①Storage 객체에 저장된 모든 항목은 StorageItem
□value 속성: 저장된 값의 인스턴스입니다.
□보안 속성: 스크립트가 HTTPS 프로토콜을 사용하여 페이지에 액세스하는 경우에만 설정할 수 있습니다. https를 통한 액세스의 기본값은 true입니다.
3.6 저장 이벤트
저장 개체를 수정하면 문서에 대한 저장 이벤트가 트리거됩니다. 해당 이벤트 객체 이벤트에는 다음과 같은 속성이 있습니다.
□domain: 변경이 이루어진 저장소의 도메인 이름입니다.
□key: 설정 또는 삭제를 위한 키 이름입니다.
□newValue: 키에 설정할 값, 삭제된 경우 null입니다.
□oldValue: 변경되기 전의 값입니다.
3.7 제한 사항
DOM 저장의 제한 사항은 브라우저와도 관련이 있습니다.