Используйте JSON после кеширования через AJAX - PullRequest
0 голосов
/ 13 июля 2020

Я новичок в кодировании и в настоящее время создаю веб-сайт, поддерживающий английский sh и русский языки. Я хочу переключаться между ними без перезагрузки страницы, поэтому я решил использовать AJAX для этого и хранить информацию в JSON. У меня есть флажок, который меняет мою langString между EN и RU в зависимости от состояния флажка.

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";
            }
        });

И это jquery код для выполнения AJAX часть

$.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")
          }
        });

My 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, а затем использовать один из них в зависимости от состояния флажок, но я не знаю, как это сделать. Если у вас есть идеи, касающиеся других способов достижения этой цели, я буду очень рад их прочитать.

Ps Engli sh - это мои 2 языка, так что простите ошибки.

1 Ответ

0 голосов
/ 13 июля 2020

Вы можете сохранить информацию в localstorage (хотя существует ограничение того, сколько вы можете там сэкономить).

Вы можете использовать эту формулу для сохранения сырых json в localstorage

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

Чтобы получить то, что находится в локальном хранилище, вы должны использовать

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

Таким образом, вы можете проверить, есть ли у пользователя правильный язык в его локальном хранилище, и если там ничего нет, вы можете скачать это с помощью этого вызова ajax.

Подробнее о локальном хранилище можно узнать здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

...