本地存储,说起来也不是什么新特性,在HTML5之前的我们已经可以通过各种方法保存本地数据,基本上包括以下方法:
HTTP Cookie 大小限制在4KB
IE专有特性userData 大小限制在64KB
Flash 大小限制100KB
Google Gears 大小限制无
HTML5 本地存储 大小限制5MB
Cookies大家都知道,存储量很小,大概也就4KB的样子,而且IE6限制每个域名20个cookies。不过Cookie的优势是通用性。几乎没有用户去禁用浏览器的Cookie功能。
userData是IE的专用特性,正是因为专用所以没人用,估计知道的人都不多。现在用的最多的是Flash的本地存储吧,空间是Cookie的25倍,大小基本够用。
后来Google发布了Google Gears,存储大小虽然没有限制,但是要装额外的插件,就这一条就把这个功能枪毙了,除非Goggle能保证 Google Gears 的装机率达到90%以上。
HTML5的出现终于解决了这一难题。首先是大小限制,W3C的给建议是每个网站5MB,这已经很大,用来存些字符串数据,绰绰有余了。其次是通用性,HTML5是一个浏览器标准,大家统一标准是迟早的事。虽说HTML5 本地存储的大小限制是5MB,但是有些浏览器在使用本地空间超出50MB时可以向用户征得同意以增加存储空间,例如Safari。对于HTML5开发者来说,5MB空间是相当够用了。
对HTML5 本地存储的支持的情况如上图, 非常出人意料的是IE在8.0的时候就支持了,这也是我在查阅相关资料时才发现的。需要注意的是,使用IE、Firefox在本地做测试的时候需要把文件上传到服务器上(或者也可以在本地搭建服务器),直接打开本地的HTML文件,是无法使用本地存储的。
如果想使用HTML5本地存储的话,为了照顾到老式浏览器,首先必须检测浏览器是否支持本地存储。在HTML5中,本地存储包括localStorage和sessionStorage,前者是一直存在本地的,后者只是在网页打开时暂时储存,窗口一旦关闭存储的信息就清空了。二者用法基本上相同,这里以localStorage为例。
1: if(window.localStorage){ 2: alert('This browser supports localStorage'); 3: }else{ 4: alert('This browser does NOT support localStorage'); 5: } 复制代码
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
1: localStorage.a = 3;//设置a为"3" 2: localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值 3: localStorage.setItem("b","isaac");//设置b为"isaac" 4: var a1 = localStorage["a"];//获取a的值 5: var a2 = localStorage.a;//获取a的值 6: var b = localStorage.getItem("b");//获取b的值 7: localStorage.removeItem("c"); 复制代码
//清除c的值
获取设置键值推荐使用getItem()和setItem(),清除键值对使用removeItem()。 使用clear() 清除所有的键值对。
HTML5本地存储只能储存字符串数据,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
HTML5的本地存储提供了一个storage事件,可以监听对键值对的改变,使用方法如下:
1: if(window.addEventListener){ 2: window.addEventListener("storage",handle_storage,false); 3: }else if(window.attachEvent){ 4: window.attachEvent("onstorage",handle_storage); 5: } 6: function handle_storage(e){ 7: if(!e){e=window.event;} 8: //showStorage(); 9: } 复制代码
事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察键值对的变化。
§ key String 监听到改变的键名称
§ oldValue 任意 改变前的值
§ newValue 任意 改变后的值
§ url String 监听到键值改变对应的页面地址
目前javascript使用最多的数据格式是json,如果想用HTML5的本地存储来存储Json数据,直接调用JSON.stringify()将json数据转为字符串。读取出来后再调用JSON.parse()将字符串转为json格式,代码如下所示:
var details = {author:"isaac","description":"fresheggs","rating":100}; storage.setItem("details",JSON.stringify(details)); details = JSON.parse(storage.getItem("details")); 复制代码
以上就是浅谈HTML5的本地存储特性的内容,更多相关内容请关注PHP中文网(www.php.cn)!

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ホットトピック









