blocks|key|261437|text|您可以使用cookie的setter和getter创建一个对象。下面是一个非常简单的实现：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|261438|var+mock+=+{
++++value_:+'',+

++++get+cookie()+{
++++++++return+this.value_;
++++},

++++set+cookie(value)+{
++++++++this.value_+%2B=+value+%2B+';';
++++}
};|code-block|syntax|javascript|261439|可能并不是所有的浏览器都能工作(尤其是IE)。更新：它只能在支持ECMAScript+5的浏览器中工作！|BOLD|261440|。|261441|mock.cookie+=+"name=oeschger";
mock.cookie+=+"favorite_food=tripe";
alert(mock.cookie);
//+displays:+name=oeschger;favorite_food=tripe;|261442|261443|entityMap^0|5|6|0|0|N|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

You could create an object with a <code>cookie</code> setter and getter. Here is a very simple implementation:

<pre><code>var mock = {
 value_: '', 

 get cookie() {
 return this.value_;
 },

 set cookie(value) {
 this.value_ += value + ';';
 }
};
</code></pre>

Might not work in all browsers though (especially IE). Update: It only works in browsers supporting ECMAScript 5!

<a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#Defining_Getters_and_Setters" rel="noreferrer">More about getter and setters</a>.

<pre><code>mock.cookie = "name=oeschger";
mock.cookie = "favorite_food=tripe";
alert(mock.cookie);
// displays: name=oeschger;favorite_food=tripe;
</code></pre>

<a href="http://jsfiddle.net/fkling/xEVBs/" rel="noreferrer">DEMO</a>

blocks|key|261449|text|@Felix+Kling的答案是正确的，我只是想指出在ECMAScript+5中定义setter和getter有另一种语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|261450|function+MockCookie()+{
++this.str+=+'';
++this.__defineGetter__('cookie',+function()+{
++++return+this.str;
++});
++this.__defineSetter__('cookie',+function(s)+{
++++this.str+%2B=+(this.str+?+';'+:+'')+%2B+s;
++++return+this.str;
++});
}
var+mock+=+new+MockCookie();
mock.cookie+=+'name=oeschger';
mock.cookie+=+'favorite_food=tripe';
mock.cookie;+//+=>+"name=oeschger;favorite_food=tripe"|code-block|syntax|javascript|261451|同样，大多数浏览器支持MSIE5(由ECMA262第5版定义)，但不支持ECMAScript+(或JScript)。|261452|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

@Felix Kling's answer is right on, I just wanted to point out that there is an alternate syntax for defining setters and getters in ECMAScript 5:

<pre class="lang-js prettyprint-override"><code>function MockCookie() {
 this.str = '';
 this.__defineGetter__('cookie', function() {
 return this.str;
 });
 this.__defineSetter__('cookie', function(s) {
 this.str += (this.str ? ';' : '') + s;
 return this.str;
 });
}
var mock = new MockCookie();
mock.cookie = 'name=oeschger';
mock.cookie = 'favorite_food=tripe';
mock.cookie; // =&gt; "name=oeschger;favorite_food=tripe"
</code></pre>

And again, most browsers support ECMAScript 5 (defined by ECMA-262 5th Edition) but not MSIE (or JScript).

blocks|key|2956570|text|此实现允许覆盖cookies，并添加document.clearCookies()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2956571|(function+(document)+{
++++var+cookies+=+{};
++++document.__defineGetter__('cookie',+function+()+{
++++++++var+output+=+[];
++++++++for+(var+cookieName+in+cookies)+{
++++++++++++output.push(cookieName+%2B+"="+%2B+cookies[cookieName]);
++++++++}
++++++++return+output.join(";");
++++});
++++document.__defineSetter__('cookie',+function+(s)+{
++++++++var+indexOfSeparator+=+s.indexOf("=");
++++++++var+key+=+s.substr(0,+indexOfSeparator);
++++++++var+value+=+s.substring(indexOfSeparator+%2B+1);
++++++++cookies[key]+=+value;
++++++++return+key+%2B+"="+%2B+value;
++++});
++++document.clearCookies+=+function+()+{
++++++++cookies+=+{};
++++};
})(document);|code-block|syntax|javascript|2956572|entityMap^0|I|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This implementation allows overwriting cookies, and adds <code>document.clearCookies()</code>

<pre><code>(function (document) {
 var cookies = {};
 document.__defineGetter__('cookie', function () {
 var output = [];
 for (var cookieName in cookies) {
 output.push(cookieName + "=" + cookies[cookieName]);
 }
 return output.join(";");
 });
 document.__defineSetter__('cookie', function (s) {
 var indexOfSeparator = s.indexOf("=");
 var key = s.substr(0, indexOfSeparator);
 var value = s.substring(indexOfSeparator + 1);
 cookies[key] = value;
 return key + "=" + value;
 });
 document.clearCookies = function () {
 cookies = {};
 };
})(document);
</code></pre>

blocks|key|265405|text|就我个人而言，我无法劫持文档对象。一个似乎对我有效的简单解决方案是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|265406|在测试脚本的顶部，我定义了一个fakeCookie对象：|265407|var+fakeCookie+=+{
++++cookies:+[],
++++set:+function+(k,+v)+{
++++++++this.cookies[k]+=+v;
++++},
++++get:+function+(k)+{
++++++++return+this.cookies[k];
++++},
++++reset:+function+()+{
++++++++this.cookies+=+[];
++++}
};|code-block|syntax|javascript|265408|然后在我的beforeEach()中定义我的cookie存根。这基本上截获了对jQuery.cookie的调用，并且(相反！)调用我定义的回调函数(如下所示)：|265409|beforeEach(function()+{
++++var+cookieStub+=+sinon.stub(jQuery,+"cookie",+function()+{
++++++++if+(arguments.length+>+1)+{
++++++++++++fakeCookie.set(arguments[0],+arguments[1]);
++++++++}
++++++++else+{
++++++++++++return+fakeCookie.get(arguments[0]);
++++++++}
++++});
});|265410|每当我获取或设置Cookie值时，它都会使用我的fakeCookie而不是真正的jQuery.cookie。它通过查看传递的参数数量来实现这一点，并推断它是否是get/set。我真的把它粘贴进去了，它立刻就能工作了。希望这能有所帮助！！|265411|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Personally i was unable to hijack the document object.
A simple solution which seems to work for me was the following...

At the top of my test script i define a fakeCookie object:

<pre><code>var fakeCookie = {
 cookies: [],
 set: function (k, v) {
 this.cookies[k] = v;
 },
 get: function (k) {
 return this.cookies[k];
 },
 reset: function () {
 this.cookies = [];
 }
};
</code></pre>

Then in my beforeEach() i define my cookie stub. This basically intercepts calls to jQuery.cookie and (instead!) call the callback function that i have defined (see below):

<pre><code>beforeEach(function() {
 var cookieStub = sinon.stub(jQuery, "cookie", function() {
 if (arguments.length &gt; 1) {
 fakeCookie.set(arguments[0], arguments[1]);
 }
 else {
 return fakeCookie.get(arguments[0]);
 }
 });
});
</code></pre>

Any time that i get or set a cookie value it uses my fakeCookie instead of the real jQuery.cookie. It does this by looking at the number of parameters passed and deduces whether its a get/set. I literally pasted this in and it all worked straight off the bat.
Hope this helps!!

blocks|key|3170672|text|我知道这是一个古老的话题，但在我的例子中，cookies的过期是必要的，所以这里有一个解决方案，它结合了上面的答案和一个在X秒后使cookies过期的setTimeout调用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3170673|const+fakeCookies+=+{
++++//+cookie+jar
++++all:+{},

++++//+timeouts
++++timeout:+{},

++++//+get+a+cookie
++++get:+function(name)
++++{
++++++++return+this.all[+name+]
++++},

++++//+set+a+cookie
++++set:+function(name,+value,+expires_seconds)
++++{
++++++++this.all[+name+]+=+value;

++++++++if+(+expires_seconds+)+{
++++++++++++!+this.timeout[+name+]+%7C%7C+clearTimeout(+this.timeout[+name+]+)
++++++++++++this.timeout[+name+]+=+setTimeout(()+=>+this.unset(name),+parseFloat(expires_seconds)+*+1000)
++++++++}
++++},

++++//+delete+a+cookie
++++unset:+function(name)
++++{
++++++++delete+this.all[+name+]
++++}++++
}|code-block|syntax|javascript|3170674|entityMap^0|1P|1|23|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

I know this is an old topic, but in my case expiring cookies was necessary so here's a solution that combines the above answers and a <code>setTimeout</code> call to expire cookies after <code>X</code> seconds:

<pre><code>const fakeCookies = {
 // cookie jar
 all: {},

 // timeouts
 timeout: {},

 // get a cookie
 get: function(name)
 {
 return this.all[ name ]
 },

 // set a cookie
 set: function(name, value, expires_seconds)
 {
 this.all[ name ] = value;

 if ( expires_seconds ) {
 ! this.timeout[ name ] || clearTimeout( this.timeout[ name ] )
 this.timeout[ name ] = setTimeout(() =&gt; this.unset(name), parseFloat(expires_seconds) * 1000)
 }
 },

 // delete a cookie
 unset: function(name)
 {
 delete this.all[ name ]
 } 
}
</code></pre>

blocks|key|266996|text|我发现jasmine有spyOnProperty，当您想要监视对象的getter和setter时，可以使用它。所以我用这个解决了我的问题：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|266997|const+cookie:+string+=+'my-cookie=cookievalue;';++++
spyOnProperty(document,+'cookie',+'get').and.returnValue(cookie);|code-block|syntax|javascript|266998|entityMap^0|B|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I figured out that jasmine has <code>spyOnProperty</code> which can be used for when you want to spy on getter and setters of objects. So I solved my issue with this:

<pre><code>const cookie: string = 'my-cookie=cookievalue;'; 
spyOnProperty(document, 'cookie', 'get').and.returnValue(cookie);
</code></pre>

<code>document.cookie</code> is like a string, but it is not a string. To quote the example from the <a href="https://developer.mozilla.org/En/Document.cookie">Mozilla doc</a>:

<pre><code>document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// displays: name=oeschger;favorite_food=tripe
</code></pre>

If you tried to make a mock cookie using only a string, you would not get the same results:

<pre><code>var mockCookie = "";
mockCookie = "name=oeschger";
mockCookie = "favorite_food=tripe";
alert(mockCookie);
// displays: favorite_food=tripe
</code></pre>

So, if you wanted to unit test a module that operates on the cookie, and if you wanted to use a mock cookie for those tests, could you? How?

Is it possible to mock document.cookie in JavaScript?

单元测试

jQuery

document.cookie类似于字符串，但它不是字符串。引用中的示例document.cookie = "name=oeschger";document.cookie = "favorite_food=tripe";alert(document.cookie);// displays: name=oeschger;...

问可以在JavaScript中模拟document.cookie吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在JavaScript中模拟document.cookie吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在JavaScript中模拟document.cookie吗？
EN