HTML5 웹 스토리지
HTML5를 사용하면 사용자의 검색 데이터를 로컬에 저장할 수 있습니다.
이전에는 로컬 저장소에서 쿠키를 사용했습니다. 하지만 웹 스토리지는 더욱 안전하고 빨라야 합니다. 데이터는 서버에 저장되지 않지만 사용자가 웹사이트 데이터를 요청할 때만 데이터가 사용됩니다. 또한 웹사이트 성능에 영향을 주지 않고 많은 양의 데이터를 저장할 수도 있습니다.
HTML5 로컬 저장소의 Web Storage
Web Storage는 HTML5에서 도입된 매우 중요한 기능으로 앞에서 자주 사용됩니다- 데이터는 HTML4 쿠키와 유사하게 클라이언트에 로컬로 저장될 수 있지만 쿠키보다 훨씬 더 강력할 수 있습니다. 쿠키 크기는 4KB로 제한되며 웹 스토리지에서는 공식적으로 각 웹사이트에 5MB를 권장합니다. Web Storage는 두 가지 유형으로 나누어집니다.
sessionStorage
localStorage
말 그대로 할 수 있습니다. sessionStorage는 세션에 데이터를 저장하고 브라우저를 닫으면 사라지는 반면, localStorage는 데이터가 적극적으로 삭제되지 않는 한 sessionStorage인지 여부에 관계없이 데이터가 만료되지 않습니다. localStorage에서 사용할 수 있는 API는 동일합니다.
데이터 저장: localStorage.setItem( key, value ); value );
데이터 읽기: localStorage.getItem( key ); sessionStorage.getItem( key );
단일 데이터 삭제: localStorage.removeItem( key );
모든 데이터 삭제: localStorage.clear( ); sessionStorage.clear( );
인덱스 키 가져오기: localStorage.key( index );
둘 모두 키 수, 즉 키 길이를 나타내는 속성 길이를 갖습니다.
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage . length;
위와 같이 키와 값은 모두 문자열이어야 합니다. 즉, 웹 스토리지 API는 문자열에서만 작동할 수 있습니다.
웹 저장소를 사용하기 전에 브라우저가 localStorage 및 sessionStorage를 지원하는지 확인해야 합니다.
if(typeof(Storage)! ==="정의되지 않음")
{ // 예! localStorage sessionStorage 객체를 지원합니다!
// 일부 코드....
} else {
// 죄송합니다. 웹 스토리지는 지원되지 않습니다.
}
예:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存储</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>