HTML5의 웹 저장소 사용에 대한 자세한 소개
- 黄舟원래의
- 2017-03-15 16:00:031208검색
1) 로컬 저장소(localStorage) 사용:
전역 속성localStorage를 통해 로컬 저장소 기능에 액세스하고 Storage 객체는 문자열 쌍을 키/값 형태로 유지하는 데 사용됩니다.
Storage 개체의 구성원:
getItem(04e2d1534acf0c0aab54d4ce6f133283) ——지정된 키와 연관된 값을 가져옵니다. key(< ;index>) ——지정된index 길이의 키 가져오기 ——저장된 키/값 쌍의 수를 반환합니다.
RemoveItem(42538adbdb6240b2b083a000a615d5bd) ——지정된 키에 해당하는 키/값 쌍을 제거합니다.
setItem(< ;key>,8487820b627113dd990f63dd2ef215f3) - 새 키/값 쌍을 추가합니다. 키가 이미 사용된 경우 업데이트
해당 값key> ]——array의 액세스 형식을 사용하여 지정된 키
저장소 이벤트 를 수신합니다. :
문서가 로컬 저장소를 수정하면 저장소 이벤트가 트리거되고 할당된 개체는 StorageEvent 개체입니다. 해당 개체는
키 - 반환 발생 변경된 키oldValue - 이 키와 관련된 이전 값을 반환합니다.
newValue - 새 값을 반환합니다. 이 키와 연관된 값;
url - 변경된 문서 URL을 반환합니다.
StorageArea - 변경된 Storage 개체를 반환합니다. 🎜>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons{
margin-left: 50px;
margin-top:5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<p>
<label>Key:</label>
<input id="key" placeholder="Enter Key">
</p>
<p>
<label>Value:</label>
<input id="value" placeholder="Enter Value">
</p>
<p id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</p>
<p id="countmsg">There are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
<tr>
<th>Item Count:</th><td>-</td>
</tr>
</table>
<script>
displayData();
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById("key").value;
var value=document.getElementById("value").value;
localStorage.setItem(key,value);
break;
case 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData(){
var tableElem=document.getElementById("data");
tableElem.innerHTML="";
var itemCount=localStorage.length;
document.getElementById("count").innerHTML=itemCount;
for(var i=0;i<itemCount;i++){
var key=localStorage.key(i);
var val=localStorage[key];
tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
</style>
</head>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldValue</th>
<th>newValue</th>
<th>url</th>
<th>storageArea</th>
</tr>
</table>
<script>
var tableElem=document.getElementById("data");
window.onstorage=handleStorage;
function handleStorage(e){
var row="<tr>";
row+="<td>"+ e.key+"</td>";
row+="<td>"+ e.oldValue+"</td>";
row+="<td>"+ e.newValue+"</td>";
row+="<td>"+ e.url+"</td>";
row+="<td>"+ (e.storageArea == localStorage)+"</td></tr>";
tableElem.innerHTML+=row;
}
</script>
</body>
</html>2) 세션 저장소 사용(sessionStorage)
세션 저장소는 로컬 저장소와 매우 유사하게 작동합니다. 의 차이점은 데이터가 각 브라우저 컨텍스트에만 적용되며 문서를 닫으면 제거된다는 것입니다.
아아아아
위 내용은 HTML5의 웹 저장소 사용에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.