ホームページ ウェブフロントエンド Vue.js ローカルストレージの用途は何ですか?

ローカルストレージの用途は何ですか?

Nov 11, 2020 pm 02:34 PM
localstorage

localstorage の使用法: 1. localStorage は Cookie の 4K 制限を拡張します; 2. localStorage は、最初に要求されたデータをローカルに直接保存できます。これは、フロントエンド ページの 5M データベースに相当します。

ローカルストレージの用途は何ですか?

【関連記事の推奨事項: vue.js

ローカルストレージの使用量:

1. localStorage と sessionStorage とは

HTML5 では、主にローカル ストレージとして使用される新しい localStorage 機能が追加されました。不十分な Cookie ストレージ スペース (Cookie 内の各 Cookie のストレージ スペースは 4K です)。一般に、ブラウザは localStorage で 5M のサイズをサポートします。これは、ブラウザによって localStorage が異なります。

HTML5 では、ローカル ストレージは、localStorage と sessionStorage を含むウィンドウ属性です。名前から 2 つの違いは明確に識別できます。前者は常にローカルに存在し、後者はセッションにのみ付随します。窓が閉まっていると消えてしまいます。 localStorage と sessionStorage の違いは次のとおりです。

(1)localStorage と sessionStorage はどちらも、クライアント上に一時情報を保存するために使用されるオブジェクトです。

(2) 文字列タイプのオブジェクトのみを保存できます (仕様では他のネイティブ タイプのオブジェクトも保存できますが、これを実装しているブラウザは今のところありません)。

(3) localStorage のライフサイクルは永続的です。つまり、ユーザーがブラウザーによって提供される UI 上の localStorage 情報を消去しない限り、情報は永久に存在します。

(4) sessionStorage のライフ サイクルは現在のウィンドウまたはタブです。ウィンドウまたはタブが完全に閉じられると、sessionStorage に保存されているすべてのデータが消去されます。

(5) 異なるブラウザ間で localStorage または sessionStorage の情報を共有することはできません。同じブラウザ内の異なるページは同じ localStorage (ページは同じドメイン名とポートに属します) を共有できますが、sessionStorage 情報は異なるページまたはタブ間で共有できません。ページとタブはトップレベル ウィンドウのみを参照することに注意してください。タブに複数の iframe タグが含まれており、それらが同じソース ページに属している場合、それらの間で sessionStorage を共有できます。

2. localStorage の利点と制限

localStorage の利点

1. localStorage は Cookie の 4K 制限を拡張します

2 . LocalStorage は、最初に要求されたデータをローカルに直接保存できます。これは、フロントエンド ページの 5M データベースに相当します。Cookie と比較して帯域幅を節約できますが、これはハイエンド ブラウザでのみ使用できます。## の制限事項

#localStorage は Zhongcai によってサポートされています

1。ブラウザのサイズは均一ではなく、localStorage 属性は IE8

2 より上の IE バージョンでのみサポートされます。現在、すべてのブラウザで値が制限されます。 localStorage の型を文字列型に変換するには、日常的によく使用される JSON オブジェクト型に変換する必要があります

3. localStorage はブラウザのプライバシー モードでは読み取れません

4. LocalStorage は基本的に文字列を読み取ります。保存されたコンテンツが大量にある場合、メモリ領域が消費され、ページがスタックする原因になります。

5. LocalStorage はクローラーによってクロールできません

localStorage と sessionStorage の唯一の違いは次のとおりです。 localStorage は永続ストレージであり、sessionStorage は永続ストレージです。セッションが終了すると、sessionStorage のキーと値のペアはクリアされます。

ここでは、localStorage を使用して分析します

3. localStorage の使用

localStorage を使用する場合、まず、ブラウザが localStorage 属性をサポートしているかどうかを確認する必要があります

 if(!window.localStorage){
   alert("浏览器支持localstorage");
    return false;
 }else{
   //主逻辑业务
}
ログイン後にコピー

localstorage Storage

たとえば、個人の学校情報を保存したい場合は、次のように記述できます:

var requesteducatData = {
    "school": '吉林大学',
    "startSchoolTime": '2015',
    "finishSchoolTime": '2019',
    "schoolTypeId": '大学',
};
    window.localStorage.setItem('educatList', JSON.stringify(requesteducatData));//对象转字符串
ログイン後にコピー

実行後の結果は次のとおりです:

ローカルストレージの用途は何ですか?

関連する無料学習の推奨事項: JavaScript(ビデオ)

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

localstorage がデータを正常に保存できないのはなぜですか? localstorage がデータを正常に保存できないのはなぜですか? Jan 03, 2024 pm 01:41 PM

localstorage へのデータの保存が常に失敗するのはなぜですか?特定のコード例が必要 フロントエンド開発では、ユーザー エクスペリエンスを向上させ、その後のデータ アクセスを容易にするために、ブラウザー側にデータを保存する必要があることがよくあります。 Localstorage は、クライアント側のデータ ストレージ用に HTML5 によって提供されるテクノロジであり、データを保存し、ページが更新または閉じられた後にデータの永続性を維持するための簡単な方法を提供します。ただし、データ ストレージにローカルストレージを使用すると、

localstorage アイテムの有効期限を設定する方法 localstorage アイテムの有効期限を設定する方法 Jan 11, 2024 am 09:06 AM

ローカルストレージの有効期限を設定する方法には、具体的なコード例が必要です インターネットの急速な発展に伴い、フロントエンド開発ではブラウザにデータを保存することが必要になることがよくあります。 Localstorage は、ブラウザーでデータをローカルに保存する方法を提供することを目的とした、一般的に使用される WebAPI です。ただし、localstorage には有効期限を直接設定する方法はありません。この記事では、ローカルストレージの有効期限を設定する方法をコード例を用いて紹介します。

削除された Localstorage データを復元する方法は何ですか? 削除された Localstorage データを復元する方法は何ですか? Jan 11, 2024 pm 12:02 PM

削除された Localstorage データを復元するにはどうすればよいですか? Localstorage は、Web ページにデータを保存するために使用されるテクノロジーです。複数のページ間でデータを共有するために、さまざまな Web アプリケーションで広く使用されています。ただし、場合によっては、Localstorage 内のデータを誤って削除してしまい、トラブルが発生することがあります。では、削除された Localstorage データを復元するにはどうすればよいでしょうか?以下に具体的な手順とコード例を示します。ステップ 1: Loca への書き込みを停止する

localstorage を使用してデータを保存する手順と注意事項 localstorage を使用してデータを保存する手順と注意事項 Jan 11, 2024 pm 04:51 PM

localStorage を使用してデータを保存する手順と注意事項 この記事では、主に localStorage を使用してデータを保存する方法と、関連するコード例を紹介します。 LocalStorage は、サーバーを経由せずにデータをユーザーのコンピューターのローカルに保持する、ブラウザーにデータを保存する方法です。 localStorage を使用してデータを保存する手順と注意事項は次のとおりです。ステップ 1: ブラウザが LocalStorage をサポートしているかどうかを確認する

ローカルストレージが安全でないのはなぜですか? ローカルストレージが安全でないのはなぜですか? Oct 10, 2023 pm 05:38 PM

ローカルストレージが安全でない理由は、暗号化されていないデータ、XSS 攻撃、CERF 攻撃、容量制限などです。詳細な紹介: 1. データは暗号化されません。Localstorage は、シンプルなキーと値のペアのストレージ システムです。データはユーザーのブラウザにクリア テキストで保存されます。つまり、誰でも簡単に localstorage に保存されているデータにアクセスして読み取ることができます。機密情報の場合は、ローカルストレージに保存されていると、ハッカーや悪意のあるユーザーがこの情報などを簡単に入手できます。

ローカル ストレージにデータを正しく保存できないのはなぜですか? ローカル ストレージにデータを正しく保存できないのはなぜですか? Jan 03, 2024 pm 01:41 PM

localstorage がデータを正常に保存できないのはなぜですか? Web 開発では、次回ユーザーが Web サイトにアクセスしたときにデータをすぐにロードまたは復元できるように、ユーザーのデータをローカルに保存する必要がよくあります。ブラウザでは、localStorage を使用してこの機能を実現できます。ただし、localStorage を使用して保存したデータが正しく動作しない場合があります。では、なぜこのようなことが起こるのでしょうか? localStorage を使用する理由を理解するには

localstorage を使用してデータを保存する手順 localstorage を使用してデータを保存する手順 Jan 11, 2024 am 09:14 AM

localstorage を使用してデータを保存するにはどうすればよいですか?はじめに: localstorage は、HTML5 によって提供されるブラウザーのローカル ストレージ メカニズムであり、これを介してデータをブラウザーで簡単に保存および読み取ることができます。この記事では、localstorage を使用してデータを保存する方法を紹介し、具体的なコード例を示します。この記事は次の部分に分かれています: 1. localstorage の概要、2. localstorage を使用してデータを保存する手順、3. コード例、4. よくある質問

ローカルストレージとは何ですか ローカルストレージとは何ですか Dec 19, 2023 pm 02:07 PM

localStorage は、Web ブラウザーでデータを保存および取得できる Web API で、Web サイトがサーバーではなくユーザーのローカル ブラウザーにデータを保存できるようにします。ユーザー設定、好み、ショッピング カート データなど、さまざまな種類のデータを保存するために使用できます。ブラウザごとに異なるストレージ制限があり、通常は最大ストレージ制限があります。これは、Web サイトのユーザー エクスペリエンスを向上させ、パーソナライズされたサービスを提供するために使用できます。ただし、localStorageを使用する場合はプライバシーなどに注意する必要があります。

See all articles