下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:H5 的 sessionStorage和localStorage

作者:有编制的小猿     来源: https://www.cnblogs.com/mahailun/p/mhl-20190909-JSON.html点击数:1930发布时间: 2020-03-04 19:31:25

标签: HTML5appjava

Web开发

  用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。

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程