HTML5 웹 저장소

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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <style type="text/css"> textarea { width: 300px; height: 300px; } .button { width: 100px; } </style> </head> <body> <script type="text/javascript"> //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 //页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 function saveSession() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.sessionStorage; oStorage.mydata = mydata; t1.value += "sessionStorage保存mydata:" + mydata + "\n"; } function readSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "sessionStorage读取mydata:" + mydata + "\n"; } function cleanSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "sessionStorage清除mydata:" + mydata + "\n"; } function saveStorage() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.localStorage; oStorage.mydata = mydata; t1.value += "localStorage保存mydata:" + mydata + "\n"; } function readStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "localStorage读取mydata:" + mydata + "\n"; } function cleanStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "localStorage清除mydata:" + mydata + "\n"; } </script> <div> <textarea id="t1"></textarea> <br> <label>需要保存的数据: </label> <br> <input type="text" id="t2" /> <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" /> <input type="button" class="button" onclick="readSession()" value="session读取" /> <input type="button" class="button" onclick="cleanSession()" value="session清除" /> <input type="button" class="button" onclick="saveStorage()" value="local保存" /> <input type="button" class="button" onclick="readStorage()" value="local读取" /> <input type="button" class="button" onclick="cleanStorage()" value="local清除" /> </div> </body> </html>

제출하다 코드 재설정

자동운전