JavaScript 클라이언트측 저장소

1. 서문:

클라이언트측 스토리지는 실제로 웹 브라우저의 메모리 기능으로, 브라우저의 API를 통해 데이터를 하드 디스크에 저장합니다.

2. 다양한 형태의 스토리지 Storage:

1. 웹 저장소: localStorage와 sessionStorage는 동일한 Storage 개체를 나타냅니다. 영구 인덱스는 문자열이고 값도 문자열 배열입니다.

둘은 서로 다릅니다. 저장소 유효 기간은 다르며 다른 것들은 기본적으로 보편적이며 범위는 문서 소스 수준에 있으며 도메인 간에 액세스할 수 없습니다.

LocalStorage: 저장된 데이터는 영구적이며 데이터는 서로 공유됩니다. 동일한 출처의 문서를 읽을 수 있습니다. 데이터를 가져오거나 덮어쓰지만 브라우저 제한이 적용됩니다.

sessionStorage: 범위는 창이나 탭으로 제한되며 탭을 닫으면 모든 데이터가 삭제됩니다.

둘 다 일반 js로 처리할 수 있습니다. 객체를 사용하여 .key 또는 [key]를 통해 데이터를 설정하고 가져옵니다. 새 브라우저는 공식 API도 제공합니다.

SetItem(): 해당 항목을 설정합니다. localStorage.setItem( "x",1);

getItem() 형식의 이름 및 값: localStorage.getItem("x" 형식으로 해당 값을 가져오려면 이름을 전달합니다. );

RemoveItem(): 이름을 전달하고 해당 데이터를 삭제합니다.clear(): 저장된 모든 데이터를 지웁니다.

key(): 모든 이름을 열거하기 위해 길이와 함께 사용됩니다. : for(var i=0;i

2. 쿠키: 쿠키 데이터는 웹 브라우저와 웹 서버 간에 자동으로 전송되므로 서버 스크립트는 클라이언트에 저장된 쿠키 값을 읽고 쓸 수 있습니다.

쿠키 ​​제한: 각 웹 서버는 20개 이상의 쿠키를 저장할 수 없으며, 각 쿠키에 의해 저장되는 데이터는 4kb를 초과할 수 없습니다.

//保存cookie:
function setCookie(name,value){
    //对value值进行表面,转义分号，逗号和空白符;
    var cookie = name+""+encodeURIComponent(value);
    cookie += "; max-age="+3000;//设置有效期 毫秒数;
    cookie += ";path=/";        //设置作用域路径
    cookie += ";domain="+domain;//作用域域名 只能是当前服务器的域;
    cookie += "; secure"; //设置此属性，则只有通过HTTPS或其他安全协议连接是才能传递cookie;
    
    document.cookie = cookie; //保存
}
//改变与删除cookie都要使用相同的名字、路径和域; 改变时,值设为新的; 删除时，设置max-age=0;
//读取所有cookie值
function getCookie(){
    var cookies = {};
    var all = document.cookie;
    if(all === ""){
        return cookies;
    }
    var list = all.split("; ");
    for(var i in list){
        var cookie = list[i];
        var p = cookie.indexOf("=");
        cookies[cookie.substring(0,p)] = decodeURLComponent(cookie.substring(p+1));
    }
    return cookies;
}　　　　　

3. 클라이언트 데이터베이스(html5) ): IndexedDB: 새 버전의 Chrome 및 FireFox 지원 4. 파일 시스템(HTML5): 현재 새 버전에서만 로컬 파일 시스템을 읽고 쓸 수 있습니다. Chrome 브라우저에서 이를 구현합니다.