html5의 LocalStorage 로컬 저장소 예

1. 로컬 저장소

HTML5가 탄생하기 전에는 웹사이트에서 브라우저 측에 데이터를 저장하려는 경우 Cookies만 사용할 수 있었고 쿠키 사용에 많은 제한이 있었습니다.

　 쿠키 문제:

　 1. 쿠키 크기는 약 4K로 제한됩니다(브라우저마다 일관성이 없습니다)

　 2. 쿠키는 모든 HTTP 요청과 함께 전송됩니다(불필요한 쿠키가 많이 함께 전송됨)

　 로컬 저장소 :

　　1. localStorage 크기는 5M로 제한됩니다(브라우저마다 일치하지 않습니다)

　　2. LocalStorage는 HTTP 요청과 함께 전송되지 않습니다

2. 세션 수준 로컬 저장소 -sessionStorage

sessionStorage: 사용자가 웹사이트를 탐색할 때 웹사이트에 들어간 시점부터 웹사이트를 닫을 때까지 세션 개체의 유효 기간입니다.

　 sessionStorage는 로컬 저장소에서 관련 작업을 수행하는 네 가지 방법을 제공합니다.

　1. setItem(key, value); 로컬 저장소 데이터 추가

　2.getItem( key ); key를 통해 해당 값 가져오기

　3.removeItem( key ); key를 통해 삭제 해당 값

　4.clear(); 모든 로컬 세션 데이터 지우기(이 도메인 이름으로 제한됨)

 1 <script type="text/javascript"> 
 2     //添加key-value 数据到 sessionStorage 
 3     sessionStorage.setItem("name", "怜白"); 
 4     sessionStorage.setItem("job", "前端"); 
 5  
 6     //通过key来获取value 
 7     var name = sessionStorage.getItem("name"); 
 8  
 9     console.log(name); // 怜白
 10     console.log(sessionStorage.length); // 2
 11 
 12     // 通过key删除value
 13     sessionStorage.removeItem("job");
 14 
 15     console.log(sessionStorage.length); // 1
 16 
 17     //清空所有的key-value数据。
 18     sessionStorage.clear();
 19 
 20     console.log(sessionStorage.length); // 0
 21 </script>

3. 영구 로컬 저장소-localStorage

localStorage: 지속성 저장소를 위한 로컬 저장소. 데이터가 적극적으로 삭제되면 데이터는 만료되지 않습니다.

　localStorage는 로컬 저장소에서 관련 작업을 수행하는 네 가지 방법을 제공합니다.

　1. setItem(key, value); 로컬 저장소 데이터 추가

　2.getItem( key ); key를 통해 해당 값 가져오기

　3.removeItem( key ); 해당 값을 삭제 key

값 4. clear() ; 모든 로컬 데이터 지우기

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("name", "怜白");
    localStorage.setItem("job", "前端");

    //通过key来获取value
    var name = localStorage.getItem("name");

    console.log(name); // 怜白
    console.log(localStorage.length); // 2

    // 通过key删除value
    localStorage.removeItem("job");

    console.log(localStorage.length); // 1

    //清空所有的key-value数据。
    localStorage.clear();

    console.log(localStorage.length); // 0
</script>

4. 요약 　

localStorage와 sessionStorage의 차이점은 하나는 임시 저장소이고 다른 하나는 장기 저장소라는 것입니다.

다음과 같은 작성 방법을 본 적이 있을 것입니다.

<script type="text/javascript">
    // 设置name
    localStorage.name = "怜白"

    // 删除name
    delete localStorage.name
</script>

위의 직접 할당 방법은 실제로 기능을 구현할 수 있지만 공식 문서에서는 안전하지 않은 작성 방법으로 정의하므로 이 작성 방법을 사용하지 말고 localStorage에서 제공하는 방법을 사용하십시오.

위 내용은 html5의 LocalStorage 로컬 저장소 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!