html5のローカルストレージとは何ですか?

html5 ローカル ストレージには次のものが含まれます: 1. localStorage、ライフ サイクルは永続的です。localStorage 情報がアクティブに消去されない限り、この情報は永久に存在します。2. sessionStorage、現在のセッションでのみ有効です。ページを閉じます。またはブラウザが後でクリアされました。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 Web ストレージは、localStorage や sessionStorage など、クライアントに保存されるローカル ストレージです。 HTML5 Web ストレージはキーと値のペアの形式で保存され、通常は文字列として保存されます。

localStorage

localStorage のライフサイクルは永続的であり、localStorage 情報が積極的に消去されない限り、この情報は永久に存在します。保存されるデータのサイズは通常 5MB で、クライアント (つまりブラウザ) にのみ保存され、サーバーとの通信には関与しません。

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        localStorage.setItem('Author', 'local');
        // 2、从本地存储获取数据
        localStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        localStorage.removeItem('Author');
        // 4、清除所有保存的数据
        localStorage.clear();

sessionStorage

sessionStorage は現在のセッションでのみ有効です。閉じる ページまたはブラウザは後で消去されます。保存されるデータのサイズは通常 5MB で、クライアント (つまりブラウザ) にのみ保存され、サーバーとの通信には関与しません。

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        sessionStorage.setItem('Author', 'session');
        // 2、从本地存储获取数据
        sessionStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的数据
        sessionStorage.clear();

複雑なデータ ストレージ

上記はすべて単純なデータ型のストレージに関するものですが、 storage データがオブジェクトまたは配列の場合、直接保存することはできません

間違った保存場所:

    var user = {
      username: 'liu',
      password: '123456'
    };
    sessionStorage.setItem('user', user);
    console.log(sessionStorage.getItem('user'));

現時点では、データ形式は次のとおりである必要があります。変換された。

データを保存する前: JSON.stringify を使用してオブジェクトを文字列に変換します

データを取得した後: JSON.parse## を使用します# 変換する 文字列をオブジェクトに変換します

    var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);

推奨チュートリアル: "

html ビデオ チュートリアル"

以上がhtml5のローカルストレージとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。