html5 中的 wbe storage 和cookie

最新推荐文章于 2025-12-04 18:23:50 发布

转载最新推荐文章于 2025-12-04 18:23:50 发布 · 366 阅读

文章标签：

#html5

本文介绍了WebStorage中的sessionStorage和localStorage的使用方法，包括数据的保存、读取、删除等操作，并提供了具体的JavaScript实现示例。

主要由两个组成，sessionStorage 和localStoryge
sessionStorage 将数据保存在session中，关闭游览器后删除
localStorage 一直保存在本地客户端，除非主动删除，否则不过期
保存： localStorage.setItem(key,value),sessionStorage.setItem(key,value)
读取： localStorage.getItem(key),sessionStorage.getItem(key)
删除单个： localStorage.removeItem(key),sessionStorage.removeItem(key)
删除全部：localStorage.clear();sessionStorage.clear()
得到key：localStory.key(index);sessionStorage.key(index)
key的个数：locaStory.length
浏览器是否支持功能if(window.localStorage){}

//保存数据    
function save(){    
      var mobilephone = document.getElementById("mobilephone").value;    
      var user_name = document.getElementById("user_name").value;    
      if(window.localStorage){   
           localStorage.setItem(mobilephone,user_name);    
    }else{  
           alert("浏览器还不支持 web storage 功能");  
    }  
}

//查找数据    
function find(){    
    var search_phone = document.getElementById("search_phone").value;    
    var name = "";  
    if(window.localStorage){   
         localStorage.getItem(search_phone);    
    }else{  
        alert("浏览器还不支持 web storage 功能");  
    return; //采用其他处理方式   
    }  
    var find_result = document.getElementById("find_result");    
    find_result.innerHTML = search_phone + "的机主是：" + name;    
}