H5 的 sessionStorage和localStorage

Posted 2022-10-09 mahailun

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转成JSON　　JSON.parse();

　　JSON转成String　　JSON.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
                            var s=JSON.stringify(data);
                            sessionStorage.setItem("admin",s);
                            window.location.href="index.html";
                        else
                            flag=false;
                            //把验证码恢复原来的状态
                            re.refresh();
                            $("#msg").html("<span style=‘color: red;‘>用户名或密码错误，请重试！！！</span>");
                            setTimeout(function () 
                                $("#msg").html("");
                            ,2000);
                        
                    )
                else
                    $("#msg").html("<span style=‘color: red;‘>请滑动验证码！！!</span>");
                    setTimeout(function () 
                        $("#msg").html("");
                    ,2000);
                

 

 

 

 

 2019-09-09 10:18:45