Javascript 如何在没有本地存储的情况下重构？

我写了一个脚本，每天向网站访问者展示一张不同的随机图像。我是一个Javascript noob，所以当我把这个应用到工作中时，我感到非常自豪。但是，我使用localStorage保存随机变量，因此如果您在同一天访问该页面，您将看到相同的图像。现在我意识到，正因为如此，如果你打开不同的浏览器（或不同的计算机），你可以在同一天得到不同的图像。我希望所有用户在一天内看到相同的图像

然而，每次我重写脚本以消除localStorage random时，我的代码都会中断，我不知道为什么。正如我所说，我正在学习Javascript，所以我想我只是缺少了一些对更高级的人来说可能很明显的基础知识。有人能帮我吗

以下代码可以工作，但取决于本地存储：

var now = new Date();
var day = now.getDay();
var checkDay = localStorage.getItem('day');
var checkRandom = localStorage.getItem('random');

function Random(){
    var random = [Math.floor(Math.random()*846+1)];
    localStorage.setItem('random', JSON.stringify(random));
}

//If user has never visited before, define random.

if (checkRandom === null) {
    Random();
}

(function() {

//If user has never visited before or if it's a different day,
//remove old random, reroll, append to div, set localStorage day.

if ( checkDay === null || checkDay != day) {
 (function() {
    localStorage.removeItem('random');
    Random();
    var today = JSON.parse(localStorage.getItem('random'));
    image = '<img src=\"' + today + '.png\">';
    $(image).appendTo($('#result'));
    localStorage.removeItem('day');
    localStorage.setItem('day', JSON.stringify(day));

})();
} else {
    //Else will fire if user visits on the same day.
    //Retrieve previous random and append to div.

    var today = JSON.parse(localStorage.getItem('random'));
    image = '<img src=\"' + today + '.png\">';
    $(image).appendTo($('#result'));

}
})();

var now=newdate（）；
var day=now.getDay（）；
var checkDay=localStorage.getItem（'day'）；
var checkRandom=localStorage.getItem（'random'）；
函数随机（）{
var random=[Math.floor（Math.random（）*846+1）]；
setItem（'random'，JSON.stringify（random））；
}
//如果用户以前从未访问过，请定义random。
if（checkRandom==null）{
随机（）；
}
（功能（）{
//如果用户以前从未访问过，或者是不同的一天，
//删除旧的random、重新回滚、追加到div、设置localStorage day。
if（checkDay==null | | checkDay！=day）{
（功能（）{
localStorage.removietem（'random'）；
随机（）；
var today=JSON.parse（localStorage.getItem（'random'）；
图像=''；
$（图像）.appendTo（$（“#结果”）；
localStorage.removietem（'day'）；
localStorage.setItem（'day'，JSON.stringify（day））；
})();
}否则{
//如果用户在同一天访问，则Else将触发。
//检索上一个random并附加到div。
var today=JSON.parse（localStorage.getItem（'random'）；
图像=''；
$（图像）.appendTo（$（“#结果”）；
}
})();

下面是我试图重构代码以实现所有相同的功能，但避免本地存储的随机性。然而，这一直在告诉我，我的var random在else语句中没有定义。我不明白为什么，因为它看起来基本上和原作一样

var now = new Date();
var day = now.getDay();
var checkDay = localStorage.getItem('day');
var setDay = localStorage.setItem('day', JSON.stringify(day));

function Random(){
    var random = [Math.floor(Math.random()*846+1)];
}

if (checkDay === null) {
    Random();
}

(function() {


if ( checkDay != day) {
 (function() {
    Random();
    image = '<img src=\"' + random + '.png\">';
    $(image).appendTo($('#result'));
    localStorage.removeItem('day');
    setDay;

})();
} else {
    image = '<img src=\"' + random + '.png\">';
    $(image).appendTo($('#result'));
}
})();

var now=newdate（）；
var day=now.getDay（）；
var checkDay=localStorage.getItem（'day'）；
var setDay=localStorage.setItem（'day'，JSON.stringify（day））；
函数随机（）{
var random=[Math.floor（Math.random（）*846+1）]；
}
如果（checkDay==null）{
随机（）；
}
（功能（）{
如果（checkDay！=天）{
（功能（）{
随机（）；
图像=''；
$（图像）.appendTo（$（“#结果”）；
localStorage.removietem（'day'）；
设定日；
})();
}否则{
图像=''；
$（图像）.appendTo（$（“#结果”）；
}
})();

---

我做错了什么？如果没有localStorage for random，您将如何重构它？

这里的Javascript被用作客户端脚本语言。因此，无论您使用什么客户端（浏览器），您的代码都将依赖于此。您可以尝试Cookie、localStorage等，但它们都依赖于打开JS代码的浏览器。任何其他浏览器，或处于私人浏览（匿名）模式的同一浏览器，将无法维护状态

---

如果在所有浏览器中显示一天相同的图像对您很重要，那么您应该使用一些服务器端语言并维护服务器上的状态。（PHP，甚至node.js）

首先，您重新分解的代码中还有一个问题

var setDay = localStorage.setItem('day', JSON.stringify(day));

这不会神奇地创建对该代码的引用，以便您可以稍后在if语句中通过按其名称调用来运行它（正如您实际尝试的那样），但它会存储该函数调用的返回值。您也不需要对其进行字符串化，因为

Date（）.getDay（）

将返回一个数字，并且在添加到

localStorage

时，默认情况下会将其转换为字符串。只需将该行包装在函数中，并按如下方式调用它：

var setDay = function(){ localStorage.setItem('day', day) };

至于问题的第二部分（

random

是

未定义的

），问题与JS中作用域的工作方式有关。通过在该函数中定义

random

，您只允许函数中的内容使用它。如果希望它在函数外部可访问，请在函数外部定义它。哦，顺便说一句，你可以用

var

在多个赋值后加逗号：

var now = new Date(),
    day = now.getDay(),
    checkDay = localStorage.getItem('day'),
    setDay = function(){ localStorage.setItem('day', day) },
    random;

这将在代码的主作用域中定义

random

变量，允许您在整个脚本中使用它。只需从为变量分配随机数的函数中删除

var

。最后，不要在数字周围使用

[]

（方括号），因为这样会创建一个数组。它以前工作的唯一原因是，如果数组看起来像

[“a”、“b”、“c”、“d”]

，那么当字符串化时，它会变成

“a、b、c、d”

。只有一个元素的数组中不会有逗号，这允许您以前的代码工作，尽管它不正确

function Random(){
    random = Math.floor(Math.random()*846+1);
}

---

---

另外需要注意的是，您不一定能够在自动安装的所有浏览器上识别用户。有人试图这样做，例如，但如果您想存储与特定人员而不是特定浏览器相关的信息，则需要某种服务器端解决方案来存储用户的数据，并在需要时加载（例如，在请求登录后）.

要每天获得一张随机图像（对所有访问者都一样），为什么不忘记本地存储/cookies，只使用一组图像名称呢？ 在javascript中编写数组时，只需随机化一次。 要获取当天的图像，请使用当前日期递增数组索引。 让阵列足够长，你的访客不会注意到你是否再次穿过它 当索引达到数组的最大值时-例如，使用模运算

var images = [{
    "01": "image1.png"
}, {
    "02": "image2.png"
}, {
    "03": "image3.png"
}, {
    "04": "image4.png"
}, {
    "05": "image5.png"
}, {
    "06": "image6.png"
}, {
    "07": "image7.png"
}, {
    "08": "image8.png"
}, {
    "09": "image9.png"
}, {
    "10": "image10.png"
}, {
    "11": "image11.png"
}, {
    "12": "image12.png"
}, {
    "13": "image13.png"
}, {
    "14": "image14.png"
}, {
    "15": "image15.png"
}, {
    "16": "image16.png"
}, {
    "17": "image17.png"
}, {
    "18": "image18.png"
}, {
    "19": "image19.png"
}, {
    "20": "image20.png"
}, {
    "21": "image21.png"
}, {
    "22": "image22.png"
}, {
    "23": "image23.png"
}, {
    "24": "image24.png"
}, {
    "25": "image25.png"
}, {
    "26": "image26.png"
}, {
    "27": "image27.png"
}, {
    "28": "image27.png"
}, {
    "29": "image29.png"
}, {
    "30": "image30.png"
}, {
    "31": "image31.png"
}];
// day of month / today
var now = new Date().toJSON().split("-").slice(-1)[0].slice(0, 2); 
$.each(images, function (k, v) {
    if (now in v) {
        $("<img>", {
            "src": v[now]
        })
        .appendTo($("#result"))
    }
});

var图像=[{
“01”：“image1.png”
}, {
“02”：“image2.png”
}, {
“03”：“image3.png”
}, {
“04”：“image4.png”
}, {
“05”：“image5.png”
var images = [{
    "01": "image1.png"
}, {
    "02": "image2.png"
}, {
    "03": "image3.png"
}, {
    "04": "image4.png"
}, {
    "05": "image5.png"
}, {
    "06": "image6.png"
}, {
    "07": "image7.png"
}, {
    "08": "image8.png"
}, {
    "09": "image9.png"
}, {
    "10": "image10.png"
}, {
    "11": "image11.png"
}, {
    "12": "image12.png"
}, {
    "13": "image13.png"
}, {
    "14": "image14.png"
}, {
    "15": "image15.png"
}, {
    "16": "image16.png"
}, {
    "17": "image17.png"
}, {
    "18": "image18.png"
}, {
    "19": "image19.png"
}, {
    "20": "image20.png"
}, {
    "21": "image21.png"
}, {
    "22": "image22.png"
}, {
    "23": "image23.png"
}, {
    "24": "image24.png"
}, {
    "25": "image25.png"
}, {
    "26": "image26.png"
}, {
    "27": "image27.png"
}, {
    "28": "image27.png"
}, {
    "29": "image29.png"
}, {
    "30": "image30.png"
}, {
    "31": "image31.png"
}];
// day of month / today
var now = new Date().toJSON().split("-").slice(-1)[0].slice(0, 2); 
$.each(images, function (k, v) {
    if (now in v) {
        $("<img>", {
            "src": v[now]
        })
        .appendTo($("#result"))
    }
});