web前端：H5 的 sessionStorage和localStorage

作者:有编制的小猿更新于： 2020-03-04 19:31:22

　　用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，但是有泛型

　　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，但是有泛型

　　//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("用户名或密码错误，请重试！！！");

　　setTimeout(function(){

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

　　},2000);

　　}

　　})

　　}else{

　　$("#msg").html("请滑动验证码！！!");

　　setTimeout(function(){

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

　　},2000);

　　}

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