영구 로컬 저장소: localStorage

사용자가 영구적으로 저장된 웹 측 데이터를 쉽게 저장할 수 있도록 localStorage 개체가 최신 JS API에 추가되었습니다. 또한 Http 요청을 통해 데이터가 백엔드 서버로 전송되지 않으며 HTML5 표준에서는 브라우저가 최소 4MB를 지원하도록 요구하므로 저장된 데이터의 크기를 고려할 필요가 없습니다. 쿠키의 한계를 극복하고 웹에 대한 더 나은 솔루션을 제공합니다. 애플리케이션은 복잡한 사용자 추적 데이터를 로컬에 저장하여 매우 편리한 기술 지원을 제공합니다. 다음으로 일반적으로 사용되는 localStorage 메소드를 소개하겠습니다.

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

• setItem(key, value)은 로컬 저장소 데이터를 추가합니다. 두 매개변수는 매우 간단하므로 자세히 설명하지 않겠습니다.

• getItem(key)는 key를 통해 해당 값을 가져옵니다.

• removeItem(key)은 키별로 로컬 데이터를 삭제합니다.

• clear()는 데이터를 지웁니다.

<script type="text/javascript">
        //添加key-value 数据到 sessionStorage
        sessionStorage.setItem("demokey", "http://blog.itjeek.com");
        //通过key来获取value
        var dt = sessionStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //sessionStorage.clear();
        alert(sessionStorage.length);
    </script>

JS를 배우고 디버깅하려면 Chrome 디버깅 도구의 도움을 받아야 절반의 노력으로 두 배의 결과를 얻을 수 있습니다. 물론 Chrome은 제가 가장 좋아하는 웹 개발 보조 도구이기도 합니다. IE를 포함해 F12 단축키를 사용하면 바로 도구를 열 수 있어 매우 간단합니다. 아래 그림을 통해 현재 브라우저에서 sessionStorage 데이터를 확인할 수 있습니다.