zoukankan      html  css  js  c++  java
  • 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); 
    


    单枪匹马你别怕,一腔孤勇又如何,这一路你可以哭,但不能怂!

    ——  Here are lovecode3000 ~

  • 相关阅读:
    查看mysql版本的四种方法及常用命令
    newInstance和new的区别(good)
    Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 前缀表达式
    Java实现 蓝桥杯 算法训练 前缀表达式
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/14398258.html
Copyright © 2011-2022 走看看