localStorage和sessionStorage使用及監聽

localStorage和sessionStorage使用

示例瀏覽器Storage使用方法

localStorage和sessionStorage使用方法一樣

<input type="text"  id="shuru">
<input type="button" value="保存" onclick="saveIT()">
<input type="button" value="刪除" onclick="deleteIT()">
<input type="button" value="讀取" onclick="readIT()">
<input type="button" value="清空" onclick="clearIT()">
<p id="disp"></p>


<script>
  //當前瀏覽器是否支持localStorage
  if(window.localStorage){
    // alert("您的瀏覽器支持");
  }
  else{
    alert("您的瀏覽器不支持");
  }

  var shuruIpt=document.getElementById("shuru");
  var dispEle=document.getElementById("disp");
  var Key="jikexueyuan2";
  //保存
  function saveIT(){
    //localStorage.setItem(名稱，相應的值)
    //localStorage.名稱=相應的值
    localStorage.setItem(Key,shuruIpt.value);
  }
  //刪除
  function deleteIT(){
    //localStorage.removeItem(名稱);
    localStorage.removeItem(Key);
    dispEle.innerHTML=localStorage.getItem(Key);
  }
  //讀取
  function readIT(){
    //localStorage.getItem(名稱);
    //localStorage.名稱
    dispEle.innerHTML=localStorage.getItem(Key);
  }
  //清空
  function clearIT(){
    localStorage.clear();
  }
</script>

監聽瀏覽器Storage的更改

Storage更改監聽事件必須要至少打開2個頁面，本頁面無法檢測自己的變化，具體操作可參考如下。

例如頁面1往頁面2添加音樂：在1頁面保存storage，那么在2頁面做個監聽。

注意要使用localStorage

//監聽函數
window.addEventListener("storage",function(event){
              //localStorage的key+ 舊val + 新val
	console.log(event.key+":"+event.oldValue+"____"+event.newValue);
})

監聽事件的兼容性代碼：

window.addEventListener("storage",自定義事件); 

window.attachEvent("onstorage",handle_storage);