jQuery从json文件更新localstorage



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

我想做的是,当我更改jsonfile值时,我希望本地存储自动更新这个值。我想我错过了什么。

如果有人能帮我的话,这是我的代码。

//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"
}

非常感谢。

无论何时更改json,都必须更新本地存储。

每次更新json时,如果希望它在本地存储中更新,就必须这样做。它不能自动完成。

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

最新更新