码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 简单的Web 存储(localStorage)

时间:2018-11-19 12:33:05      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:lse   一个   创建   name   代码   click   教程   cookie   删除   

HTML5 web 存储,一个比cookie更好的本地存储方式。
使用HTML5可以在本地存储用户的浏览数据。
客户端存储数据的两个对象为:
localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined"){
    // 支持 localStorage  sessionStorage 对象!
    // 代码.....
} else {
    // 不支持 web 存储。
}
<div id="result"></div>
<script>
/*
实例解析:
使用 key="setname" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"setname" 的值然后将数据插入 id="result"的元素中。
*/
if(typeof(Storage)!=="undefined"){
    localStorage.setname="乐视体育";
    document.getElementById("result").innerHTML="网站名:"+localStorage.setname;
}else{
    document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储。";
}
</script>
 <script>
   /*
        
     不管是 localStorage,还是 sessionStorage, 可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index); */ if(typeof(Storage)!=="undefined"){ localStorage.setItem(‘Le‘,"乐视体育"); document.getElementById("result").innerHTML="网站 名:"+localStorage.getItem(‘Le‘); document.getElementById("result").onclick=function(){ localStorage.removeItem(‘Le‘); //localStorage.clear();慎重使用会删除所有数据 } }else{ document.getElementById("result").innerHTML="对不起,您的浏览器不支 持web存储。"; } </script>

HTML5 简单的Web 存储(localStorage)

标签:lse   一个   创建   name   代码   click   教程   cookie   删除   

原文地址:https://www.cnblogs.com/yscode/p/9982216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!