文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:H5 的 sessionStorage和localStorage

敲键小勇士

敲键小勇士

2024-04-23 23:31

关注

  用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到AppStore或GooglePlay上,所以它的跨平台非常强大,也是大多数人对HTML5有兴趣的主要原因。

  1)H5新增的sessionStorage和localStorage的区别

  sessionStorage和java的session差不多,可以短时间存储信息,电脑浏览器常用sessionStorage存储用户登录信息(个人理解)

  localStorage可以永久保留用户信息,不用每次都登录,常用于app

  2)sessionStorage和localStorage共有的方法:

  1.setItem存值

  setItem就像是java里的map,但是有泛型<String,String>

  sessionStorage.setItem("user",user);

  2.getItem取值

  sessionStorage.getItem("user");

  3.removeItem删除值

  sessionStorage.removeItem("user");

  4.clear清除所有值

  sessionStorage.clear();

  3)前端转换JSON和String

  String转成JSONJSON.parse();

  JSON转成StringJSON.stringify();

  以上就是H5新增的sessionStorage和localStorage的基本用法,结合实例会更明白他们的用法。

  编程代码如下:

  //如果falg为真,也就是验证码正确,向后台发请求

  if(flag==true){

  $.post("http://localhost:8080/test/admin/login",{username:user,password:pwd},function(data){

  if(data){

  //setItem就像是java里的map的put,但是有泛型<String,String>

  //data是JSON类型的,所以用JSON.stringify(data)转为String

  vars=JSON.stringify(data);

  sessionStorage.setItem("admin",s);

  window.location.href="index.html";

  }else{

  flag=false;

  //把验证码恢复原来的状态

  re.refresh();

  $("#msg").html("<spanstyle='color:red;'>用户名或密码错误,请重试!!!</span>");

  setTimeout(function(){

  $("#msg").html("");

  },2000);

  }

  })

  }else{

  $("#msg").html("<spanstyle='color:red;'>请滑动验证码!!!</span>");

  setTimeout(function(){

  $("#msg").html("");

  },2000);

  }

  HTML5吸取了XHTML2一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     436人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     201人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     163人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     242人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     68人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯