注意:cookie是基于域名来储存的。要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。

明明在浏览中可以查看到有某一个cookie 的存在,可是用js却始终无法获取到它的值,这个问题困扰我许久。偶然间想到可能是iframe的原因,经过一番查阅发现果真如此。

将场景还原一下:
我在一个iframe中使用setCookie方法设置了名为“myCookie”的cookie。

function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

而后在另一个iframe使用getCookie方法取出这个cookie:

function getCookie(objname)
{
console.log(document.cookie)
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

可是取出的值一直是null,百思不得其解。
终于经过一番探究与查阅之后,得出结论:cookie跨域导致其丢失。
百度上有很多博客上作了相关记载,这里不作详究。
既然得出了原因,那么解决方法也就浮于水面了。我在网上找到一款名为jquery cookie的轻量级插件,对于cookie的操作作了有效的封装,可以解决这类问题。

这是官方的下载地址:http://plugins.jquery.com/cookie/

jquery.cookie.js 的配置

首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件。

使用方法

1.新添加一个会话 cookie:

$.cookie(‘the_cookie’, ‘the_value’);

注:当没有指明 cookie有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为

“会话cookie(session cookie)”。

2.创建一个cookie并设置有效时间为 7天:

$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });

注:当指明了cookie有效时间时,所创建的cookie被称为“持久 cookie (persistent cookie)”。

3.创建一个cookie并设置 cookie的有效路径:

$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ });

注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。

4.读取cookie:

$.cookie(‘the_cookie’); // cookie存在 => ‘the_value’

$.cookie(‘not_existing’); // cookie不存在 => null

5.删除cookie,通过传递null作为cookie的值即可:

$.cookie(‘the_cookie’, null);

———-相关参数的解释—————

1).expires: 365

定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date 对象。如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。

2).path: ‘/’

默认情况:只有设置cookie的网页才能读取该cookie。
定义cookie的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为) 。
如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: ‘/’。如果你想删除一个定义 了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie(‘the_cookie’, null, { path: ‘/’ });。

domain: ‘example.com’
默认值:创建 cookie的网页所拥有的域名。

3).secure: true

默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。

4).raw: true

默认值:false。

默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用encodeURIComponent 编码,decodeURIComponent 解码)。
要关闭这个功能设置 raw: true 即可。
————————————————
原文链接:https://blog.csdn.net/qq_28550739/article/details/61915450

为什么用JS取不到cookie的值?解决方法如下!的更多相关文章

  1. jQuery之JSP加载JS文件不起作用的有效解决方法

    JSP加载JS文件不起作用的有效解决方法 作者: 字体:[增加 减小] 类型:转载 时间:2014-04-08 jsp导入jquery文件,老是不起作用,原因在于其不能访问/WEB-INF/目录下的文 ...

  2. js报Uncaught SyntaxError: Unexpected token <错误 解决方法

    js报Uncaught SyntaxError: Unexpected token <错误 解决方法 错因 js被shiro的拦截器拦下,访问不了 #shiro的配置 shiro: hash-a ...

  3. 在smarty模板中取不到Cookie的值解决方案

    在原生PHP中我们用:setcookie()来设置Cookie变量,用$_COOKIE这个全局变量来读取Cookie.例如 if(!isset($_COOKIE['user'])) { setcook ...

  4. jquery.cookie.js 获取不到cookie的值

    最近使用$.cookie获取cookie 的值.发现完全取不到.看了浏览器里也存了对应的值.可以添加,但是就是取不到., 折腾了半天,后来突然想起来加了个有可能带汉字的cookie键值.删掉就可以取出 ...

  5. js正则表达式replace里有变量的解决方法用到RegExp类

    一直比较害怕使用正则表达式,貌似很深奥很复杂的样子,所以在用js操作字符串的时候,我最多使用的是replace.split.substring.indexOf等函数,这些函数有时候需要多次叠加使用,但 ...

  6. jquery 删除cookie失效的解决方法

    最近在做网站退出功能的时候出现删除Cookie 的时候总是失效. 1.使用$.cookie("name","");  结果出来是生成了一个新的空值的cookie ...

  7. js 未结束的字符串常量错误解决方法

    1.JAVASCRIPT引用时,使用的字符语言不一致. 比如:<script type=”text/javascript” src=”xxx.js” charset=”UTF-8″>.xx ...

  8. cookie 跨域解决方法

    1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...

  9. webBrowser获取取Cookie不全的解决方法

    //取当前webBrowser登录后的Cookie值           [DllImport("wininet.dll", CharSet = CharSet.Auto, Set ...

随机推荐

  1. 使用python3安装frida-tools出错

    执行安装命令 pip3.6 install frida-tools 得到错误信息 error: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] c ...

  2. java大型互联网项目大流量高并发所需的技术

    互联网一般运行技术:webservice,jquery,访问量,缓存,数据安全等,JAVA后台就比较多了,不过,像这种大型的互联网项目,基本框架都有了,你需要做的就是熟悉业务,熟悉他们公司所用的框架, ...

  3. Flutter移动电商实战 --(51)购物车_Provide中添加商品

    新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List< ...

  4. Bitmap之compress图片压缩

    package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...

  5. NPM 私服

    下载https://nodejs.org/en/download/ linux binaries x64版本xz -d ....xztar -xvf ....tar导入path修改~/.bashrc加 ...

  6. 37 Flutter仿京东商城项目 结算页面布局

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...

  7. 一百四十六:CMS系统之帖子按照发布时间和评论数量排序

    按照不同选项进行排序 视图 @bp.route('/')def index(): board_id = request.args.get('board_id', type=int, default=N ...

  8. linuxan安装redis出现Newer version of jemalloc required错误

    linux安装redis执行make命令时出现问题 解决方法 make MALLOC=libc 如果要指定安装文件夹 使用命令:make PREFIX  = /usr/local/redis(文件夹路 ...

  9. PAT 甲级 1048 Find Coins (25 分)(较简单,开个数组记录一下即可)

    1048 Find Coins (25 分)   Eva loves to collect coins from all over the universe, including some other ...

  10. hadoop在windows上的配置文件

    core-site.xml <configuration> <property> <name>hadoop.tmp.dir</name> <val ...