> 웹 프론트엔드 > H5 튜토리얼 > HTML5 웹 스토리지

HTML5 웹 스토리지

大家讲道理
풀어 주다: 2017-05-28 11:06:50
원래의
2037명이 탐색했습니다.

과거에는 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 부분:




  
" 비밀번호 기억하기
"
"


"
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
web
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿