jQuery ローカルストレージ

Sheeraz Gul 2022年8月18日

jQuery jQuery Local Storage

jQuery には、ローカルストレージを操作するための組み込み機能はありませんが、jQuery オブジェクトで JavaScript ローカルストレージメソッドを使用できます。このチュートリアルでは、jQuery でローカルストレージを使用する方法を示します。

jQuery ローカルストレージ

JavaScript の setItem() および getItem() メソッドは、ローカルストレージからデータを保存および取得するために使用されます。これらのメソッドを使用して、jQuery オブジェクトをローカルストレージに保存し、ローカルストレージからオブジェクトを取得できます。jQuery を使用するこれらのメソッドの構文は次のようになります。

var html = $('element')[0].outerHTML;

localStorage.setItem('DemoContent', html);

localStorage.getItem('htmltest')

var html が jQuery オブジェクトを JavaScript オブジェクトに変換し、それを localStorage に格納し、最後に localStorage から取得する場合、DemoContent がキーであり、html 変数がの値です。setItem メソッド。

jQuery から localStorage にテキストを設定して取得する例を試してみましょう。例を参照してください：

<!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>

上記のコードは、段落のコンテンツをローカルストレージに設定し、アラートボックスに表示します。出力を参照してください。

jQuery ローカルストレージテキスト

次に、jQuery を使用して HTML オブジェクト全体を localStorage に設定して取得してみましょう。例を参照してください：

<!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>

上記のコードは、$('#DemoPara1')[0].outerHTML; を使用して jQuery オブジェクトを JavaScript オブジェクトに変換します。メソッドを作成してローカルストレージに保存し、最後にアラートボックスでオブジェクトを取得します。出力を参照してください：

jQuery ローカルストレージ HTML

著者： Sheeraz Gul

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