jQuery Lokale Speicherung
jQuery bietet keine integrierte Funktionalität, um mit dem lokalen Speicher zu arbeiten, aber wir können die lokalen Speichermethoden von JavaScript mit jQuery-Objekten verwenden. Dieses Tutorial zeigt, wie Sie den lokalen Speicher mit jQuery verwenden.
jQuery Lokale Speicherung
Die Methoden setItem() und getItem() von JavaScript werden zum Speichern und Abrufen der Daten aus dem lokalen Speicher verwendet; Wir können diese Methoden verwenden, um jQuery-Objekte im lokalen Speicher zu speichern und die Objekte aus dem lokalen Speicher abzurufen. Die Syntax für diese Methoden mit jQuery lautet:
var html = $('element')[0].outerHTML;
localStorage.setItem('DemoContent', html);
localStorage.getItem('htmltest')
Wo var html das jQuery-Objekt in ein JavaScript-Objekt umwandelt, es im localStorage speichert und schließlich aus dem localStorage holt, ist der DemoContent der Schlüssel und die html-Variable der Wert für die setItem-Methode.
Versuchen wir ein Beispiel, um einen Text von einer jQuery in den localStorage zu setzen und zu erhalten. Siehe Beispiel:
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Local Storage</title>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Click Here</button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
var TextContent = $('#DemoPara1').text();
localStorage.setItem('textcontent', TextContent);
alert(localStorage.getItem('textcontent'));
});
});
</script>
</body>
</html>
Der obige Code legt den Inhalt des Absatzes im lokalen Speicher fest und erhält ihn im Warnfeld. Siehe Ausgabe:
Versuchen wir nun, das gesamte HTML-Objekt mit jQuery in den localStorage zu setzen und abzurufen. Siehe Beispiel:
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Local Storage</title>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Click Here</button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
var HTMLContent = $('#DemoPara1')[0].outerHTML;
localStorage.setItem('htmlcontent', HTMLContent);
alert(localStorage.getItem('htmlcontent'));
});
});
</script>
</body>
</html>
Der obige Code konvertiert das jQuery-Objekt in ein JavaScript-Objekt unter Verwendung von $('#DemoPara1')[0].outerHTML; Methode und speichern Sie es im lokalen Speicher, erhalten Sie schließlich das Objekt in der Warnbox. Siehe Ausgabe:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook