H5 的 sessionStorage和localStorage

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

原文地址:https://www.cnblogs.com/mahailun/p/mhl-20190909-JSON.html

时间: 2024-11-06 15:10:20

H5 的 sessionStorage和localStorage的相关文章

H5本地存储sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储.当用户关闭浏览器窗口后,数据立马会被删除.(特别提示:新建一个标签页面以后,即使跟前一个页面的地址相同,新建标签页面也获取不到前一个页面中获取或者设置的sessionStorage) localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的

[Html5]sessionStorage和localStorage的区别

摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStorage和localStorage. sessionStorage:用于存储一次会话的数据,这些数据只有在同一个会话中的页面才能访问到,当会话结束后,数据也随之销毁,可以这样形容sessionStorage,是会话级别的数据存储. localStorage:用于持久本地数据,除非主动删除,否则数据永远存

【总结】HTMl5的sessionStorage和localStorage

最近在做人人自媒的对接后台的工作的时候,由于是微信平台,需要获得微信用户的openid,所以 根据和后台君的沟通后,发现要用到sessionStorage,之前对于这两个H5的新特性都只是了解,今天 终于可以派上用场了,兴奋! 可是兴奋归兴奋,自己对这两个家伙可不是特别熟悉,所以没办法,百度一下and goole it,在网上 找到了一点资料,清楚了基本的用法之后,再经过不停的调试,总算是用上了后台提供的接口了. 基本的代码如下: 1 if(window.sessionStorage){ 2 v

sessionStorage、localStorage技术相关以及商家sid、sbid记录相关、vue相关问题

一个项目的需求如下: 作为第一个第三方平台,我们可以提供给不同的商家技术支持,即在一个url后面根据不同的商家来提供不同的查询字符串(包含sid和sbid),所以为了得到这个商家的信息,我们需要使用解析这个查询字符串然后从后天获取数据. 出现的问题1: 由于这是vue做的单页面应用,在下方有不同的按钮路由到不同的页面, 所以如果点击到其他路由,然后再点击回来的时候,根据路由设置,我们的首页的url此时应该是没有查询字符串了,当然,这个不重要啊,因为我们可以把数据(sid和sbid)放在一个全局变

HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. web storage和cookie的区别 Web Stora

HTMl5的存储方式sessionStorage和localStorage详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储.而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. 一.web storage和cookie的区别 Web Stora

[Html5]sessionStorage和localStorage常见操作

摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可以了. var local = window.localStorage; local.name = "wolfy"; local["age"] = 22; console.log(local.name, local["age"]); 遍历key和va

sessionstorage,localstorage和cookie之间的区别

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递. 共同点:都是保存在浏览器端,且同源的. 区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的

请描述一下 cookies,sessionStorage 和 localStorage 的区别?

(1)cookie在浏览器和服务器间来回传递, sessionStorage和localStorage不会. (2)sessionStorage和localStorage的存储空间更大. (3)sessionStorage和localStorage有更多丰富易用的接口. (4)sessionStorage和localStorage各自独立的存储空间.