フロントエンドメモリ

6339 ワード

javascript

フロントエンドメモリ
前言
ウェブアプリケーションは、ブラウザが提供するAPIを使用して、ユーザのコンピュータにデータを格納することを可能にし、このようなクライアントストアは、Webブラウザの記憶機能を付与したものに相当する.
クライアントストアは「ソースポリシー」に従っていますので、異なるサイトのページは互いに相手の記憶しているデータを読み取ることができません.
クライアントストアには以下のいくつかの形態があります.

Webストア

クッキー

IE User Data

オフラインWebアプリケーション

ウェブデータベース

ファイルシステムAPI

Webストーリー
「webストア」のドラフト標準を実現したブラウザはWindowオブジェクトに二つの属性を定義しました.
これらの2つの属性をサポートするブラウザは、IE 8+、Firefox 3.5+、Chrome 4+、Opera 10.5+.
web Storrageの目的は、cookieによってもたらされるいくつかの制限を克服することであり、データがクライアント上に厳密に制御される必要がある場合には、サーバにデータを継続的に送り返す必要がない.web Strageの二つの主な目標は:

は、クッキー以外にセッションデータを格納するための手段

を提供する.

は、大量のセッションにわたって存在することができるデータを格納するメカニズム

を提供する.
有効期間

local Strageによって格納されたデータは恒久的であり、webアプリケーションが意図的に保存されたデータを削除しない限り、またはユーザはブラウザ構成(ブラウザが提供する特定のUI)を設定することによって削除します.そうでないと、データはずっとユーザのコンピュータに保存されています.

session Storrageの有効期間は、データを格納するスクリプトの最上位のウィンドウまたはブラウザのタブページと同じです.ウィンドウやタブページが永久に閉じられたら、session Storrageで記憶されているデータもすべて削除されます.(現代ブラウザは、最近閉じたタブページを再開して、前回の閲覧を再開するための会話機能を備えているので、これらのタブページとそれに関連するsession Storrageの有効期限はもっと長いかもしれない).

スコープ

local Strageのスコープは、文書ソースレベルに限定されており、ブラウザプロバイダによっても制限されている.

session Strageのスコープも文書ソースに限定されています.それだけではなく、ウィンドウの中で

に限定されています.
APIを格納する
local Strageとsession Storrageは通常、一般的なJSオブジェクトとして使用され、この2つのオブジェクトは正式なAPIを提供しています.

データを保存する:local Strage.setItem(key,value);session Strage.setItem(key,value);

データを読み出す:local Strage.getItem(key);session Strage.getItem(key);

単一データを削除する:local Strage.removeItem(key);session Strage.removeItem(key);

すべてのデータを削除します.session Strage.clear()

は、あるインデックスのkey:local Strage.key(index);session Strage.key(index)

注:両方とも属性lengthはkeyの個数、つまりkeyの長さを表します.keyとvalueは文字列でなければなりません.
Strage事件
Storrageオブジェクトの変更は、ドキュメント上でstorgeイベントをトリガします.このイベントのイベント対象は以下の属性があります.

doman:変化が発生した格納空間のドメイン名

key:設定または削除するキー名

newValue:設定値であれば、新しい値です.削除キーなら、nullです.

oldValue:キーが変更される前の値

制限
local Strageとsession Strageに対する記憶制限は、ブラウザによって異なります.具体的な参考:http://dev-test.nemikor.com/web-storage/support-test/
Cookie
概念
クッキーとは、Webブラウザに格納されている少量のデータであり、具体的なWebページまたはサイトに関連するものである.最初は、セッション情報をクライアントに記憶するためのものである.
有効期間
cookieデフォルトの有効期間はとても短いです.彼はウェブブラウザのセッションの間だけ続けられます.一旦ユーザがブラウザを閉じると、クッキーが保存しているデータがなくなります.
注:session Storrageの有効期限とは違って、ブラウザ全体の有効期限と有効期限は単一のブラウザウィンドウの有効期限と一致していません.
cookieの有効期限を延長したいならば、max-age属性を設定することによって、ブラウザクッキーの有効期間はどれぐらいあるかを明確に教えられます.
スコープ
cookieのスコープは、ドキュメントソースとドキュメントパスによって決定されます.パスをパスしてdomainでドメインを設定できます.
注:クッキーのpath属性はアクセス制御機構として使用できません.一つのページが同じサイトの他のページのクッキーを読みたいなら、他のページを簡単に隠し

</code>として み むだけで、その に  するドキュメントのクッキーを み むことができます.<br>セキュリティ<br>これは、クッキーの がどのような で  するかを すブール タイプの  である.そのデフォルトは、   な で(  の、   なHTTP  によって) えられています.secure  が  されている  は、ブラウザとサーバがHTTPSまたは のセキュリティプロトコルで  (SSL)されている  にのみ えられます.<br>   <br>   のドメイン の で  20 のクッキーを  します.<li> IE 6または  のバージョンは、  20 のクッキー</li>である.<li> IE 7と  のバージョンは  50 のクッキー</li>があります.<li> Firefox  50 のクッキー</li><li> ChromeとSafariはハードリミットをしていません.<li> IEとOperaは   も なく われているクッキーを  します.Firefoxはクッキー</li>をランダムに  します.<br>クッキーの  は4096バイトで、   のために4095バイトを えてはいけません.<br>jsでcookieを  する<br>jsでcookieを  するのはちょっと  で、そのインターフェースは   ではありません.<br>cookieの  / ペアはいずれもURLで   されていますので、デコードにはデコードデコードが  です.<br>JavaScriptの でcookieを むのは  に   ではないので、cookieの  を   するために  を く  があります.   なクッキー  は、 み り、 き み、  の3  があります. の に します<pre><code>var CookieUtil = {
    
    get:function(name){
        var cookieName = enCodeURIComponent(name) + '',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart &gt; -1){
            var cookieEnd = document.cookie.indexOf(";",cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length , cookieEnd));
        }
        return cookieValue;
    },

    set:function(name,value,expires,path,domain,secure){
        var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);
        if(expires instanceof Date){
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path){
            cookieText += ";path=" + path;
        }
        if(domain){
            cookieText += ";domain=" + domain;
        }
        if(secure){
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    },

    del:function(name,path,domain,secure){
        this.set(name,"",new Date(0),path,domain,secure);
    }
    
};</code></pre>IE USerData<br>マイクロソフトは、IE 5およびIEブラウザにおいて、  のクライアント    <code>userData</code>を  した.<br>indexedDB<br>indexed Database APIまたはindexedDBと  して、ブラウザに   データを  するデータベースです.  、Chrome 27＋、Firefox 21＋およびOpera 15＋はこのAPIをサポートしていますが、SafariとIE 10＋は   なサポートしかありません.<br>アプリケーションキャッシュアプリCache<br>HTML 5に「アプリケーションキャッシュ」が  され、Webアプリケーションがアプリケーション  をユーザのブラウザにローカルに  することができます.オフラインWebアプリケーションを  するために  されたものです.<br>  ファイル<br>このキャッシュにデータを  するには、  ファイルを ってダウンロードとキャッシュするリソースを    します.  は  な です.<pre><code>CACHE MANIFEST
#  
reshui.html
reshui.css
reshui.js</code></pre>  ファイルをページに   けるには、このファイルのパスは、このファイルのMIMEタイプ<code>text/cache-manifest</code>でなければならない. えば:<br>  <br>このAPIの  はappication Cacheオブジェクトで、このオブジェクトはstatus  があり、  の は  で、アプリケーションキャッシュの の  を しています.<li>:キャッシュなし、つまりページに するアプリケーションキャッシュがない.</li><li>:アイドル:すなわちアプリケーションキャッシュは  されていない.</li><li>:   、つまり  ファイルをダウンロードして  を  しています.</li><li>:ダウンロード 、つまりアプリケーションキャッシュが  ファイルで  されたリソースをダウンロードしています.</li><li>:  が  しました.つまり、アプリケーションキャッシュはリソースを  しました.そして、すべてのリソースはダウンロード みです.swapCache()を じて</li>を  できます.<li>:  、つまり、アプリケーションキャッシュの  ファイルはもう  しないので、ページはアプリケーションキャッシュに アクセスできません.</li>イベント<br>appCacheにはまだたくさんの    があります.その  の  を します.<li> checking:ブラウザがアプリケーションキャッシュのために  を  するときに、</li>をトリガする.<li> error:  またはダウンロードリソースのチェック にエラーが  したときにトリガ</li><li> noupdate:   を  して、ファイルが  していないことを  した  、トリガ</li><li> downloading:アプリケーションキャッシュリソースのダウンロード   にトリガ</li><li> progress:ファイルダウンロードアプリケーションキャッシュ に   にトリガ</li><li> udateready:ページの しいアプリケーションキャッシュのダウンロードが  し、swapCache()の   にトリガされます.</li><li> cached:アプリケーションキャッシュが  に    であるときにトリガされる   に、これらのイベントは、ページローディングに って  の  で  トリガされる.ただし、udate()メソッドを び すことにより、  で  することもできます.キャッシュが  に  できるようになったときにトリガします.<code>applicationCache.update ( ) </code> </li>

and roid日ナイトモード切り替え動画