jQuery从json文件更新localstorage

时间:2018-11-04 19:33:54

标签: jquery json

我陷入了这个jQuery localstorage更新问题。我是代码新手,对此一无所知。

我想做的是,当我更改jsonfile值时,我希望localstorage自动更新此值。我想我在这里想念什么。

如果有人可以帮助我,这是我的代码。

//start point
$(document).ready(function() {
  let jsonData = {};
  let ls = false;
  jsonData.href = window.location.href;

  function getLs() {
    if (window.localStorage["local"]) {
      ls = JSON.parse(window.localStorage.getItem("local"));
      if (ls) {
        $.each(ls, (key, val) => {
          $("#" + key).text(val);
        });
      }
    }
  }
  getLs();

  // get language from flag click
  $("[data-lang]").click(function(e) {
    e.preventDefault();

    let lang = $(this).attr("data-lang");
    let jsonFile = `lang/${lang}.json`;

    // get key:value from json files
    $.getJSON(jsonFile, data => {
      $.each(data, (k, v) => {
        // set json file to the localStorage
        if ("localStorage" in window) {
          let jsonData = JSON.stringify(data);
          window.localStorage.setItem("local", jsonData);
          $("#" + k).text(v);
        }
      });
    });
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/main.css">
    <title>Welcome To My Portfolio</title>
</head>

<body id="bg-img-home">
    <header>
        <div class="flags">
            <button class="lang fr" data-lang="fr"></button>
            <button class="lang en" data-lang="en"></button>
        </div>
        <div class="menu-btn">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>
        </div>

        <nav class="menu">
            <div class="menu-branding">
                <div class="logo"></div>
            </div>
            <ul class="menu-nav">
                <li class="nav-item current">
                    <a href="./" class="nav-link" id="home">Home</a>
                </li>
                <li class="nav-item">
                    <a href="./about.html" class="nav-link" id="about">About me</a>
                </li>
                <li class="nav-item">
                    <a href="./work.html" class="nav-link" id="work">My work</a>
                </li>
                <li class="nav-item">
                    <a href="./contact.html" class="nav-link" id="contact">Contact me</a>
                </li>
            </ul>
        </nav>
    </header>

    <main class="home">
        <h1 class="lg-heading">
            <span id="firstname">John </span>
            <span class="text-secondary" id="lastname">Mauduit</span>
        </h1>
        <h2 class="sm-heading" id="position">Web Developper</h2>
        <div class="icons">
            <a href="https://github.com/johnmauduit/Epitech_Coding_Academy" target="_blank">
                <i class="fab fa-github fa-2x"></i>
            </a>
            <a href="https://www.linkedin.com/in/johnmauduit/" target="_blank">
                <i class="fab fa-linkedin fa-2x"></i>
            </a>
        </div>
    </main>

    <script src="js/main.js"></script>
    <script src="js/lang.js"></script>
</body>

</html>

我的json有点:

{  
  "home": "accueil",
  "about": "à propos de moi",
  "work": "mon travail",
  "contact": "me contacter"
}

非常感谢。

1 个答案:

答案 0 :(得分:0)

每当对json进行更改时,您都必须更新本地存储。

每次更新json时都必须执行此操作,并且如果要在本地存储中对其进行更新。无法自动完成。

localStorage.setItem('local', JSON.stringify(yourObject));
var item = JSON.parse(localStorage.getItem('local'));