当前位置： 移动技术网 > IT编程>网页制作>Html5 > H5 的 sessionStorage和localStorage

H5 的 sessionStorage和localStorage

2019年09月09日  | 移动技术网IT编程  | 我要评论

阳谷二手房,沈阳兼职女qq,祥仔视觉

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="";
                        }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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网