HTML5 웹 저장소 상세 설명
- 高洛峰원래의
- 2017-02-10 10:42:001913검색
클라이언트 측에 데이터 저장
HTML5는 클라이언트 측에 데이터를 저장하는 두 가지 새로운 방법을 제공합니다.
• localStorage - 시간 제한 없는 데이터 저장
• sessionStorage - 세션 데이터 저장
이전에는 모두 쿠키를 통해 이루어졌습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.
HTML5에서는 모든 서버 요청에 의해 데이터가 전달되지 않고, 요청된 경우에만 데이터가 사용됩니다. 이를 통해 웹사이트 성능에 영향을 주지 않고 많은 양의 데이터를 저장할 수 있습니다.
웹사이트마다 데이터가 저장되는 위치가 다르며 웹사이트는 자체 데이터에만 액세스할 수 있습니다.
HTML5는 JavaScript를 사용하여 데이터를 저장하고 액세스합니다.
localStorage 방식
localStorage 방식으로 저장되는 데이터에는 시간 제한이 없습니다. 데이터는 다음 날, 다음 주 또는 연도 이후에도 계속 사용할 수 있습니다.
localStorage 생성 및 액세스 방법:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
</body>
</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 메소드는 데이터 저장을 위한 세션을 대상으로 합니다. 사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다.
sessionStorage 생성 및 액세스 방법:
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> </body> </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 중국어 웹사이트를 지원해 주시길 바랍니다.
HTML5 웹 저장소 세부사항과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!