H5 localStorage の使用状況の概要

Mar 26, 2018 pm 02:32 PM
html5 localstorage 使用

今回は、H5 での localStorage の使用方法についてまとめました。localStorage を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. localStorage、sessionStorage

とは この機能は主にローカルストレージとして使用され、Cookieのストレージ容量不足の問題を解決します。通常、ブラウザは localStorage で 5M のサイズをサポートしますが、この localStorage はブラウザによって異なります。

2. localStorage の利点と制限

localStorage の利点

1. localStorage は、最初に要求されたデータをローカルに保存できます。 Cookie と比較して帯域幅を節約できますが、これはブラウザの上位バージョンでのみサポートされます。サイズは均一ではなく、IE バージョンのみです。 IE8 は localStorage 属性をサポートしています。現在、すべてのブラウザーは localStorage の値の型を文字列型に制限しています。この型は何らかの変換が必要です

3。ブラウザの

4. LocalStorage は基本的に

文字列

を読み取ります。保存されたコンテンツが大量にある場合、ページがスタックする原因になります 5. LocalStorage はクローラーによってクロールされません

localStorage と sessionStorage の違いは、localStorage が永続ストレージであるのに対し、sessionStorage は永続ストレージであるということです。セッションが終了すると、sessionStorage 内のキーと値のペアはクリアされます ここでは、localStorage を使用して分析します

3. localStorage の使用

localStorage のブラウザ サポート:

ここでの特別なステートメントは、

IE ブラウザ

を使用している場合、UserData が必要であるということです。ここでの主な説明は、localStorage のコンテンツであるため、userDataブロガーの個人的な意見では、現在の IE6/IE7 は廃止されており、今日のページ開発の多くには Html5CSS3 などの新しいテクノロジが含まれるため、UserData の使用方法を学ぶ必要はありません。一般に、これを使用する場合は互換性がありません

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

if(!window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }
ログイン後にコピー
localStorage を記述する方法は 3 つあります。ここではその 1 つを紹介します。
if(!window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }
ログイン後にコピー
を実行した後の結果は次のとおりです:

ここで、localStorage の使用は同一生成元ポリシーにも従うため、異なる Web サイトが同じ localStorage を直接共有できないことに注意してください。コンソールは次のとおりです: 読者が今保存された型が int であることに気づいたかどうかはわかりませんが、出力される型は string です。これは、localStorage 自体の特性に関連しており、localStorage は文字列型のストレージのみをサポートします。

localStorageの読み取り

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }
ログイン後にコピー

localStorageを読み取るには3つの方法がありますが、その中で公式に推奨されている2つの方法は、これも分からないので聞かないでください。 localStorage はフロントエンドデータベースに相当すると言いましたが、データベースは主に追加、削除、確認の 4 つのステップで構成されており、ここでの読み取りと書き込みは追加と確認の 2 つのステップに相当します

。 localStorage の削除と変更の 2 つのステップ

このステップを変更することは、グローバル変数の値を変更することと同じであるため、簡単に説明します

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }
ログイン後にコピー

これは、コンソール上で行われます。 a キーが 4 に変更されていることがわかります

localStorage的删除

1、将localStorage的所有内容清除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);
ログイン後にコピー

2、 将localStorage中的某个键值对删除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);
ログイン後にコピー

控制台查看结果

localStorage的键获取

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }
ログイン後にコピー

使用key()方法,向其中出入索引即可获取对应的键

四、localStorage其他注意事项

 一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

示例:

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }
ログイン後にコピー

读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);
ログイン後にコピー

打印出来是Object对象

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

H5的存储方式详解

postMessage实现跨域、跨窗口消息传递

以上がH5 localStorage の使用状況の概要の詳細内容です。詳細については、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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles