23、H5新增js屬性之本地儲存
阿新 • • 發佈：2019-02-04
H5新增js方法之本地儲存
Storage
sessionStorage
session臨時回話，從頁面開啟到頁面關閉的時間段
視窗的臨時儲存，頁面關閉，本地儲存消失
localStorage
永久儲存（可以手動刪除資料）
Storage的特點
儲存量限制 ( 5M )
客戶端完成，不會請求伺服器處理sessionStorage資料是不共享、 localStorage共享
Storage API
setItem():
設定資料，(key,value)型別，型別都是字串
可以用獲取屬性的形式操作
getItem():
獲取資料，通過key來獲取到相應的value
removeItem():
刪除資料，通過key來刪除相應的value
clear():
刪除全部儲存的值
儲存事件:
當資料有修改或刪除的情況下，就會觸發storage事件
在對資料進行改變的視窗物件上是不會觸發的
Key : 修改或刪除的key值，如果呼叫clear(),key為null
newValue : 新設定的值，如果呼叫removeStorage(),key為null
oldValue : 呼叫改變前的value值
storageArea : 當前的storage物件
url : 觸發該指令碼變化的文件的url
注：session同窗口才可以,例子：iframe操作
<!doctype html><!--聲明當前文件為html文件--> <html lang="en"><!--語言為英語--> <head><!--頭部--> <meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼--> <meta name="Keywords" content="關鍵詞"> <meta name="Description" content="描述"> <title>Document</title> <style>/*css樣式表的衣櫃*/ </style> </head> <body><!--身體--> <input type="button" value="新增資料" id="btn1"> <input type="button" value="獲取資料" id="btn2"> <input type="button" value="刪除資料" id="btn3"> <input type="text" id="txt"> <script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); var txt = document.getElementById("txt"); //新增資料 btn1.onclick = function(){ sessionStorage.setItem("key",txt.value); } //獲取資料 btn2.onclick = function(){ var val = sessionStorage.getItem("key"); alert(val); } //刪除資料 btn3.onclick = function(){ sessionStorage.removeItem("key"); } </script> </body> </html>
類似同步購物車;
<!doctype html><!--聲明當前文件為html文件--> <html lang="en"><!--語言為英語--> <head><!--頭部--> <meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼--> <meta name="Keywords" content="關鍵詞"> <meta name="Description" content="描述"> <title>Document</title> <style>/*css樣式表的衣櫃*/ </style> </head> <body><!--身體--> <input type="checkbox" value="張三" >張三</br> <input type="checkbox" value="李四" >李四</br> <input type="checkbox" value="王五" >王五</br> <input type="checkbox" value="陳麻子" >陳麻子</br> </body> <script> var oInput = document.getElementsByTagName("input"); for (var i=0;i<oInput.length ;i++ ) { oInput[i].onclick = function(){ if (this.checked) { window.localStorage.setItem("chec",this.value); }else{ window.localStorage.setItem("onchec",this.value); } } } window.addEventListener("storage",function(ev){ if (ev.key == "chec") { for (var i=0;i<oInput.length ;i++ ) { if (ev.newValue == oInput[i].value) { oInput[i].checked = true; } } }else if(ev.key == "onchec"){ for (var i=0;i<oInput.length ;i++ ) { if (ev.newValue == oInput[i].value) { oInput[i].checked = false; } } } },false); </script> </html>