H5 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{
//主逻辑业务
}
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 は文字列型のストレージのみをサポートします。
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 localStorage の使用状況の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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