通过AJAX缓存后使用JSON

Posted 2023-03-28

【中文标题】通过AJAX缓存后使用JSON

【英文标题】：Use JSON after caching through AJAX

【发布时间】：2020-11-02 16:24:12

【问题描述】：

我是编码新手，目前正在创建一个支持英语和俄语的网站。我想在不重新加载页面的情况下在它们之间进行更改，所以我决定使用 AJAX 来实现它并将信息存储在 JSON 中。我有一个复选框，可以根据复选框状态在 EN 和 RU 之间更改我的 langString。

var langStr = "en";

        $('#langsw').click(function()

            if($(this).prop("checked") == true)
                console.log("Checkbox is checked.");
                langStr = "ru";
            
            else if($(this).prop("checked") == false)
                console.log("Checkbox is unchecked.");
                langStr = "en";
            
        );

这是执行 AJAX 部分的 jquery 代码

$.ajax(
          type:'GET',
          dataType:'json',
          url: langStr+".json",
          cache:true,
          success: function(data)
              $('#meet').append(data.title);
              $('#meet').append(data.hr);
              $('#meet').append(data.subtitle);
          ,
          error: function(data)
            console.log("there is an error")
          
        );

我的 JSON 是

  
    "title":"<h1 style=\"color:white; font-size: 42pt\">Name</h1>",
    "hr":"<hr style=\"width:60%\">",
    "subtitle":"<h1 style=\"color:#dbdbdb; font-weight:100\">Interactive resume</h1>"
  

第二个在俄语中是一样的。

现在的问题是：我想缓存两个 JSON，然后根据复选框的状态使用其中一个，但我不知道该怎么做。如果您对实现此目的的其他方法有任何想法，我将非常乐意阅读。

P.s 英语是我的第二语言，所以请原谅错误。

【参考方案1】：

您可以将信息保存在本地存储中（尽管有一个limit 说明您可以在那里保存多少）。

您可以使用此公式将原始 json 保存到本地存储中

localStorage.setItem('language-ru', data);

要获取本地存储中的内容，您将使用

const ru = localstorage.getItem('language-ru')

因此，您可以检查用户的本地存储中是否有正确的语言，如果没有，您可以使用该 ajax 调用下载它。

您可以在此处阅读有关本地存储的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage