资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

HTML5-Web存储怎么使用

这篇文章主要介绍了HTML5-Web存储怎么使用,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

宿城网站建设公司创新互联,宿城网站设计制作,有大型网站制作公司丰富经验。已为宿城上1000家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的宿城做网站的公司定做!

web存储,一个比cookie更好的本地存储方式

HTML5-Web存储怎么使用

localStorage和sessionStorage

  localStorage-没有时间限制的数据存储

  sessionStorage-针对一个session的数据存储

//是否支持if(typeof(Storage)!=="undefined")
{// 是的! 支持 localStorage  sessionStorage 对象!// 一些代码.....} else {// 抱歉! 不支持 web 存储。}

localStorage对象

localStorage对象存储的数据没有时间限制

localStorage.sitename="小南瓜";
document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);

提示:键/值对通常以字符串存储,你可以按自己的需要转换该格式。

if(typeof(Storage)!=="undefined")
{
  if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
  else
  {
  localStorage.clickcount=1;
  }
  document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}

sessionStorage对象

sessionStorage针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除

   if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉,您的浏览器不支持 web 存储";
    }

简单的网站列表程序

 





运行结果:

HTML5-Web存储怎么使用

JSON.stringify

  存储对象数据,将对象转换为字符串

var site = new Object;
...var str = JSON.stringify(site); // 将对象转换为字符串

JSON.parse

将字符串转换为JSON对象

 






感谢你能够认真阅读完这篇文章,希望小编分享HTML5-Web存储怎么使用内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!


新闻标题:HTML5-Web存储怎么使用
URL分享:http://cdkjz.cn/article/jsjehp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220