hillpig的个人博客分享 http://blog.sciencenet.cn/u/hillpig 畅想ing,思考ing,前行ing Email:bluevaley@gmail.com

博文

html5手机开发cookie的用法总结

已有 18171 次阅读 2015-3-13 15:44 |个人分类:js|系统分类:科研笔记|关键词:学者| jquery, HTML5, cookie

首先,如果不跨域,发送Ajax请求,例如:

$( "#btn_login" ).on( "click", function( event ) {      

      $.ajax({

           type: "POST",

           url: serverURL + '/user',

           dataType: 'json',

           dataType : 'jsonp',

           data: { 'nickname': nickname, 'password': password, 'action': 'login' },

           error: function(xhr, ajaxOptions, thrownError){

             //alert(xhr.status);                

           },

           success: function(xml, status, jqxhr) {

             if('true' == xml.issuccessful){//登录成功                  

                 alert(document.cookie);

                 $('#rtnInfo').html("登录已成功,正在跳转...");

                 $("#bkbutton").trigger("click");

             }else{//登录失败

                 $('#rtnInfo').html(xml.reason);

             }            

           }

       });

   });

服务器Java通过Response写一个cookie:

   Cookie cookie = new Cookie(cookieName,"");

   cookie.setDomain("your.server.domain");

   cookie.setPath("/");

   cookie.setMaxAge(10000);

   response.addCookie(cookie);

那么alert(document.cookie)结果是:


但是如果使用Intel XDK 的Emulate,同样的代码,获取到的结果如下:


然后如果用Intel XDK 的Test,或者用Cordova封装到手机上进行测试,结果如下:


那说明在手机上 document.cookie访问不到Ajax请求获得的返回的带域名的cookie的。

那么是不是可以通过getResponseHeader获得呢?


success: function(xml, status, jqxhr) {

  console.log(jqxhr.getResponseHeader("Set-Cookie"));

});

我们通过:

http://stackoverflow.com/questions/14362830/cookies-not-sent-in-ajax-request-headers-when-doing-xss-with-cors-access-contro

知道,也是获取不到的。

那通过Jquery的cookie插件是否可以呢?

我们通过引入http://plugins.jquery.com/cookie/插件:

<script type="application/javascript" src="vendor/jquery.cookie.js" ></script>

发现,通过:
$.cookie('go*****')

也是获取不到?

那么我们的问题来了,html5做手机开发,怎样使用cookie是最佳实践?

我的理解有两个方法:

第一个方法,app中不用传统的cookie处理,改用html5的localstorage,可以参考:

http://stackoverflow.com/questions/18976319/cordova-on-android-getresponseheaderset-cookie-returns-only-the-last-cookie

即:

服务端json数据传回cookie的值,然后存在 local storage中:

window.localStorage.setItem("Cookies", data);

在以后的发送Ajax请求都使用:

beforeSend:setHeader

function setHeader(xhr){    xhr.setRequestHeader('Set-Cookie', window.localStorage.getItem("Cookies"));}

第2个办法,我们发现虽然通过js获取不到服务端传回的cookie,但是实际上app的运行时是获取到了的,在以后的请求中实际上是发送了以前传回来的cookie的,故,干脆在js中什么都不干。只是有一个问题,是app中删除不了这个cookie,用户退出登录时,再次让服务器设置cookie为过期。


其他的参考:

https://software.intel.com/zh-cn/forums/topic/542690#comment-1817112


加我私人微信,交流技术。





https://m.sciencenet.cn/blog-419883-874186.html

上一篇:jquery请不要使用location.href方式跳转
下一篇:MYSQL异常:General error: 2006 MySQL server has gone away

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-6-2 12:50

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部