HTML5 웹 저장소 상세 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 웹 저장소 상세 설명

巴扎黑

May 21, 2017 pm 02:54 PM

html5 web

다음 에디터는 HTML5 웹 스토리지에 대한 자세한 설명을 제공합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 에디터와 함께 구경하러 오세요. 모두 즐거운 게임 되시길 바랍니다

클라이언트에 데이터 저장

HTML5는 두 가지 유형의 클라이언트에 데이터 클라이언트 측에 데이터를 저장하는 새로운 방법:

• localStorage - 시간 제한 없음 데이터 저장

• sessionStorage - 데이터 저장 전 세션

은 모두 쿠키에 의해 이루어졌습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.

HTML5에서는 모든 서버 요청에 의해 데이터가 전달되지 않지만 요청할 때만 데이터가 사용됩니다. 웹사이트 성능에 영향을 주지 않고 대용량 데이터를 저장할 수 있습니다.

웹사이트마다 데이터가 저장되는 위치가 다르며 웹사이트는 자체 데이터에만 액세스할 수 있습니다.

HTML5는 JavaScript를 사용하여 데이터를 저장하고 액세스합니다.

localStorage 방식

localStorage 방식으로 저장되는 데이터에는 시간 제한이 없습니다. 데이터는 다음 날, 다음 주 또는 연도 이후에도 계속 사용할 수 있습니다.

localStorage 생성 및 액세스 방법:

XML/HTML 코드클립보드에 콘텐츠 복사

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";   
document.write("Last name: " + localStorage.lastname);   
</script>
</body>
</html>

로그인 후 복사

다음 예에서는 사용자가 페이지를 방문하는 횟수를 계산합니다.

XML/HTML 코드 클립보드에 콘텐츠 복사

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)   
    {   
    localStorage.pagecount=Number(localStorage.pagecount) +1;   
    }   
else   
    {   
    localStorage.pagecount=1;   
    }   
document.write("Visits: " + localStorage.pagecount + " time(s).");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
</html>

로그인 후 복사

sessionStorage 메서드

sessionStorage 메서드는 세션 데이터 저장을 수행합니다. 사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다.

세션 저장소 생성 및 액세스 방법:

JavaScript 코드클립보드에 콘텐츠 복사

<!DOCTYPE HTML>   
<html>   
<body>   
<script type="text/javascript">   
sessionStorage.lastname="Smith";   
document.write(sessionStorage.lastname);   
</script>   
</body>   
</html>

로그인 후 복사

다음 예에서는 사용자가 현재 세션에서 페이지를 방문하는 횟수를 계산합니다.

XML/HTML 코드 클립보드에 콘텐츠 복사

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)   
    {   
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;   
    }   
else   
    {   
    sessionStorage.pagecount=1;   
    }   
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>

로그인 후 복사

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.