sessionStorage와 localStorage의 차이점은 무엇입니까-PHP 튜토리얼-php.cn

sessionStorage와 localStorage의 차이점은 무엇입니까

一个新手

풀어 주다： 2023-03-15 19:30:01

원래의

21059명이 탐색했습니다.

sessionStorage와 localStorage의 차이점은 다음과 같습니다. 1. localStorage에는 만료 시간이 없습니다. 2. sessionStorage는 세션에 대한 데이터를 저장하며 수명 주기는 사용자가 브라우저를 닫을 때 데이터가 삭제됩니다. .

sessionStorage와 localStorage의 차이점은 무엇입니까

sessionStorage와 localStorage의 차이점

우리 모두 알고 있듯이 HTML 5 표준이 등장한 이후 현지화된 저장소가 인기 검색 키워드가 되었습니다. HTML 5 초기에는 로컬 저장소의 두 가지 방법이 있었습니다. 하나는 웹 저장소이고 다른 하나는 웹 SQL이었습니다. 웹 SQL의 구현은 SQLite를 기반으로 하기 때문에 DataBase의 방향에 더 치우쳐 있으며, W3C는 2011년 11월 공식적으로 웹 SQL 사양을 더 이상 유지하지 않겠다고 발표했기 때문에 현재 웹 SQL 사양은 해당 범위에 포함되지 않습니다. HTML 5의 따라서 현재 우리가 자주 이야기하는 HTML 5 로컬 저장소는 대부분 웹 저장소를 의미합니다.

다음은 WebStorage와 그 두 가지 형태에 대한 자세한 설명과 설명입니다.

1. webStorage

webStorage는 HTML5에서 도입된 중요한 기능으로, 쿠키와 유사하게 클라이언트에 로컬로 데이터를 저장할 수 있는 경우가 많습니다. 쿠키보다 강력합니다. 쿠키의 크기는 약 4Kb(브라우저마다 크기가 다름)에 불과한 반면 webStorage의 크기는 5MB입니다. API에서 제공하는 메소드는 다음과 같습니다.

setItem(key, value) - 키-값 쌍의 형태로 데이터와 정보를 저장합니다.

getItem(key) ——데이터를 가져오고 키 값을 전달하여 해당 값을 가져옵니다.

removeItem(key)——단일 데이터를 삭제하고 키 값을 기준으로 해당 정보를 제거합니다.

clear()——모든 데이터 삭제

key(index)——인덱스 키 가져오기

2 localStorage

localStorage의 수명 주기는 영구적입니다. localStorage를 사용하여 데이터를 저장하는 경우, 브라우저를 닫더라도 데이터를 적극적으로 삭제하지 않는 한 데이터는 사라지지 않습니다. localStorage에는 길이 속성이 있으므로 해당 데이터 레코드 수를 확인할 수 있습니다. 사용법은 다음과 같습니다.

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

로그인 후 복사

localStorage는 sessionStorage보다 간단하고 주의할 점이 많지 않습니다.

3. sessionStorage

sessionStorage의 수명주기는 브라우저가 닫히기 전입니다. 즉, 전체 브라우저가 닫힐 때까지 데이터는 항상 존재합니다. sessionStorage에도 length 속성이 있으며 기본적인 판단 및 사용법은 localStorage와 동일합니다. 다음 사항에 유의해야 합니다.

<1> 페이지를 새로 고쳐도 데이터가 지워지지 않습니다.

확인을 위해 두 개의 html 파일을 준비했습니다. 하나는 index.html이고 다른 하나는 text.html입니다. text.html의 경우 그 출처에 대해서는 나중에 자세히 설명하겠습니다. 두 가지의 HTML 코드는 다음과 같습니다.

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function submit() {
                var str = document.getElementById("text").value.trim();
                setInfo(str);
                document.getElementById("text").value = "";
            }
            //储存数据
            function setInfo(name) {
                var storage = window.sessionStorage;
                storage.setItem(&#39;name&#39;, name);
            }
            //显示数据
            function shows() {
               var storage = window.sessionStorage;
               var str = "your name is " + storage.getItem("name");
               document.getElementById("text").value = str;
            }
         </script>
    </head>
    <body>
         <input type="button" value="Login" οnclick="submit()" />
         <input type="text" name="text" id="text" />
         <input type="button" value="show" οnclick="shows()" />
         <a href="text.html" target="_blank">点击打开</a>
    </body>
    </html>

로그인 후 복사

text.html 페이지는 다음과 같습니다.

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
         <script>
             var storage = window.sessionStorage;
             alert(storage.getItem("name"));
         </script>
     </body>
     </html>

로그인 후 복사

index.html 페이지를 연 결과는 다음과 같습니다.

sessionStorage와 localStorage의 차이점은 무엇입니까

show 버튼을 클릭하면 입력 상자에 "your name is null"이 표시됩니다. 이때 sessionStorage에 키 값 "name"이 저장된 데이터가 없습니다. 텍스트에 "Rick"을 입력한 후 로그인 버튼을 클릭합니다. 입력 상자가 지워지면 데이터가 sessionStorage에 저장되었습니다. 그런 다음 표시 버튼을 클릭하면 "당신의 이름은 Rick입니다"가 표시됩니다. 이때 브라우저를 클릭하여 웹 페이지를 새로 고친 다음 표시 버튼을 클릭하세요. 입력 상자에는 여전히 "당신의 이름은 Rick입니다"라고 표시됩니다

현재 페이지에서 열린 링크만 sessionStorage 데이터에 액세스할 수 있습니다.

준비된 text.html 페이지를 기억하시나요? 이제 그 역할을 수행할 차례입니다. 확인하기 위해 위의 단계를 수행하고 text.html을 엽니다. 결과는 다음과 같습니다.

sessionStorage와 localStorage의 차이점은 무엇입니까

이 값이 null이고 "name" 값을 가져올 수 없음을 알 수 있습니다. 이제 text.html 페이지를 닫고 index.html 페이지를 클릭하여 링크를 열면 다음과 같은 결과를 볼 수 있습니다.

sessionStorage와 localStorage의 차이점은 무엇입니까

따라서 현재 페이지에서 열린 링크에서는 sessionStorage 데이터에 접근할 수 있음을 알 수 있습니다. 이내에. 나중에 다른 테스트를 거친 후 index.html에서 text.html 페이지를 열고 index.html을 닫은 후 text.html을 새로 고치면 sessionStorage의 데이터에도 액세스할 수 있다는 사실을 발견했습니다. sessionStorage의 데이터는 index.html과 여기에서 열린 모든 페이지가 닫히거나 브라우저가 직접 닫힐 때만 제거될 수 있습니다.

window.open을 사용하여 페이지를 열고 localtion.href 메소드를 변경하면 sessionStorage 내부의 데이터를 얻을 수 있습니다.

위 두 가지 방법을 테스트한 결과 실제로 그렇습니다. 관심 있는 학생들은 실제로 결과를 테스트해 볼 수 있습니다. localStorage와 sessionStorage의 차이점을 요약하지는 않겠습니다.

간단히 말하면, 사용시 위에서 언급한 사항들에 주의를 기울이시면 사용시 불필요한 많은 함정을 피할 수 있습니다.

더 많은 관련 지식을 알고 싶으시다면 PHP 중국어 홈페이지를 방문해주세요! !

위 내용은 sessionStorage와 localStorage의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!