从Cookie中存储和检索JSON对象

Question

我看过很多SO，但还没能弄清楚如何使用纯JS来实现这一点。我的问题是，我需要在json数组中添加两个不同的url，并将其存储到cookie中，以便跨子域访问(我研究了iframe本地存储，它不适用于此应用程序，json数组会很小，因此4k cookie限制就足够了(。

现在我有以下内容：

function getProject(){
var url_str = window.location.href;
var ProjectImgId = url_str.split('projectId=')[1];
ProjectImgId = ProjectImgId.split('&')[0];
var UserId = url_str.split('flashId=')[1];
var ImageURL = 'https://project-api.artifactuprising.com/project/' + ProjectImgId + '/thumbnail?user=' + UserId;
var RecentProjects = {"url" : url_str, "img" : ImageURL};
return RecentProjects;
}

以上内容将在某个页面加载时运行。我希望能够这样做：检索任何现有的项目，如果url上没有匹配项，我希望将RecentProjects推送到cookie数组。

这就是我被难住的地方。我正在关注w3学校的cookie设置，该设置在过去对我很有效，但我不知道如何使用字符串和解析来推送和提取这些数据。

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var recent = getCookie("yourRecentProjects");
if (recent != "") {
// this is where I would want to parse the JSON and then check if the getProject.url value is in the current cookie json and if it is not, push it.
} else {
recent = getProject();
if (recent != "" && recent != null) {
setCookie("yourRecentProjects", recent, 365);
}
}
}

我被难住了。我已经想好了如何使用本地存储来完成这一切，然后我意识到这在子域中不起作用——这是一个很好的学习经验，但不是一个解决方案。如有任何帮助，我们将不胜感激。

Answer 1

好吧，cookie不是json，它只是一个包含一堆键值的字符串。

并不是你想对数据做100%的处理，但作为一个例子，这取自MDN，例子#3，关于如何解析该字符串以找到特定值：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie:

function doOnce() {   
if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) {
alert("Do something here!");
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";   
} }

String.prototype.split()创建一个由您传入的值分隔的子字符串段数组，Array.prototype.find()将查看数组中的每个值，直到它找到以该值开头的子字符串，或者如果什么都没有找到，则返回undefined。

在这种情况下，您可以执行document.cookie.split("")来创建键值子字符串的数组，此时您可以通过多种方式对数据进行解包。也许你只是在寻找url值的存在，在这种情况下，Array.prototype.includes()就是你想要的。