HTML5 웹 스토리지

과거에는 document.cookie를 사용하여 로컬에 데이터를 저장했지만 저장 크기가 4K 정도에 불과하기 때문에 분석도 매우 복잡해 개발에 많은 불편을 초래합니다. html5웹 저장소로 쿠키의 단점을 보완하고, 열기도 상당히 편리합니다.

웹 저장소는 두 가지 카테고리로 나누어집니다

sessionStorage

용량은 약 5M 정도입니다. 이 방법의 수명주기는 브라우저 창이 닫힐 때까지입니다

localStorage

용량은 약 20M이며, 저장된 데이터는 사용자의 브라우징 세션에 따라 만료되지 않습니다. 단, 사용자의 요청에 따라 삭제됩니다. 브라우저는 저장 공간 제한이나 보안 이유로 인해 삭제하기도 하며, 유형별로 저장된 데이터는 동일한 브라우저의 여러 창에서 공유될 수 있습니다

참고: 문자열만 저장할 수 있습니다. json Object, JSON 이후에 객체를 저장할 수 있습니다.stringify() 인코딩

메서드에 대한 자세한 설명:

　　

setItem(key, value) Set the Storage content

　getItem(key)

저장소 내용 읽기

　removeItem(key)

키 값 key

　

clear() 모두 지우기 저장 콘텐츠

다음으로 작성 방법을 보여 드리겠습니다.

　　//更新
    function update() {
        window.sessionStorage.setItem(key, value);
    }    //获取
    function get() {
        window.sessionStorage.getItem(key);
    }    //删除
    function remove() {
        window.sessionStorage.removeItem(key);
    }    //清空所有数据
    function clear() {
        window.sessionStorage.clear();
    }

효과를 보려면 Chrome을 예로 사용합니다.

다음이 있는 경우 이전 버전에는 애플리케이션이 없습니다. 예, 이전 버전은

Resource

에 대한 데이터를 저장한 후

입니다. 이제

사용자 이름과 비밀번호 기록

의 전형적인 예를 보여 드리겠습니다. 비밀번호를 기억할 때

확인란 선택하면 다음에 열 때 사용자 이름과 비밀번호를 다시 입력할 필요가 없습니다.

HTML 부분:

for=""> 사용자 이름 : <입력 유형 ="text" class="userName"/>
                                                                     ~ w
ord
" class="pwd"/>
 
 

    
" 비밀번호 기억하기
"
"


"

  var userName=document.querySelector('.userName');    var pwd=document.querySelector('.pwd');    var sub=document.querySelector('button');    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }//        否则清除用户信息    }

    window.onload=function(){//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }

위 내용은 HTML5 웹 스토리지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!