検索
ホームページウェブフロントエンドjsチュートリアルJavascript ローカル ストレージの概要

1. さまざまなストレージ ソリューションの簡単な比較

Cookie: すべてのブラウザーでサポートされ、容量は 4KB です

UserData: IE のみでサポートされ、容量は 64KB です

Flash: 100KB、非 HTML ネイティブ、プラグインのサポートが必要です

Google Gears SQLite: プラグインのサポートが必要、容量は無制限

LocalStorage: HTML5、容量は 5M

SesstionStorage: HTML5、容量は 5M

globalStorage: Firefox に固有、Firefox13 ではこのメソッドはサポートされなくなりました

UserData はIE、Google Gears、SQLite でサポートされており、Flash は HTML5 の出現とともに徐々に歴史の舞台から退いており、今日の主役は Cookie、LocalStorge、SessionStorge

2 の 3 つだけです。

Cookie を扱うフロントエンドとして Cookie は比較的古いテクノロジーで、1993 年に、ユーザーがアクセスする際のアクセス速度をさらに向上させるために、現在広く使用されている Cookie を発明しました。ウェブサイトと同時にパーソナライズされたネットワークを実現するために Cookie が使用されます。

2.1 Cookie の特徴

まず Cookie の特徴を見てみましょう:

1) Cookie のサイズは 4KB に制限されており、大きなファイルや電子メールなどの大きなデータを受け入れることができません。

2) Cookie を含むリクエストがある限り、Cookie はサーバーとブラウザの間で送受信されます (これが、ローカル ファイルが Cookie をテストできない理由の説明になります)。さらに、Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。これは、Cookie が大きくなりすぎない重要な理由でもあります。オーソドックスな Cookie の配布は、HTTP プロトコルを拡張することによって実現され、サーバーは HTTP 応答ヘッダーに特別な命令行を追加し、その命令に従って対応する Cookie を生成するようブラウザに指示します。

3) ユーザーがサーバーデータをリクエストするたびに、そのリクエストとともに Cookie がサーバーに送信されます。PHP などのサーバースクリプト言語は、Cookie によって送信されたデータを処理でき、非常に便利であると言えます。もちろんフロントエンドでもCookieを生成することはできますが、Cookieをjsで操作するのはブラウザがdocument.cookieなどのオブジェクトを提供するだけですし、Cookieの割り当てや取得も面倒です。 PHP では、setcookie() を通じて Cookie を設定し、スーパーグローバル配列 $_COOKIE を通じて Cookie を取得できます。

Cookie の内容には主に、名前、値、有効期限、パス、ドメインが含まれます。パスとドメインを合わせて Cookie のスコープを形成します。有効期限が設定されていない場合、この Cookie の有効期間はブラウザ セッション中にあり、ブラウザ ウィンドウを閉じると Cookie は消えます。ブラウザーのセッション中に保持されるこのタイプの Cookie は、セッション Cookie と呼ばれます。セッション Cookie は通常、ハードディスクではなくメモリに保存されます。もちろん、この動作は仕様では指定されていません。有効期限が設定されている場合、ブラウザは Cookie をハードディスクに保存します。ブラウザを閉じて再度開いた場合でも、設定された有効期限が経過するまでこれらの Cookie は有効です。ハード ドライブに保存された Cookie は、2 つの IE ウィンドウなど、異なるブラウザ プロセス間で共有できます。ブラウザが異なれば、メモリに保存された Cookie の処理方法も異なります。

2.2 セッション

Cookie に関して言えば、セッションについて話さずにはいられません。

セッションメカニズム。セッション メカニズムはサーバー側のメカニズムであり、サーバーは情報を保存するためにハッシュ テーブルに似た構造を使用します (またはハッシュ テーブルを使用する場合もあります)。プログラムがクライアントのリクエストに対してセッションを作成する必要がある場合、サーバーはまずクライアントのリクエストにセッション識別子 (セッション ID と呼ばれます) が含まれているかどうかを確認します。含まれている場合は、このクライアントに対してセッションが以前に作成されていることを意味します。サーバーはセッション ID に従ってセッションを取得し、それを使用します (取得できない場合は、新しいセッションが作成されます)。クライアントのリクエストにセッション ID が含まれていない場合は、クライアント用にセッションが作成されます。このセッションに関連付けられたセッション ID が生成されます。セッション ID の値は、繰り返されず、模倣するパターンが簡単に見つからない文字列である必要があります。このセッション ID は、保存のためにこの応答でクライアントに返されます。このセッション ID を保存する方法には Cookie を使用できるため、対話プロセス中にブラウザーはルールに従ってこの ID をサーバーに自動的に送信できます。通常、この Cookie の名前は SEEESIONID に似ています。ただし、Cookie は人為的に無効にすることができるため、Cookie が無効になっている場合でもセッション ID をサーバーに戻す他のメカニズムが必要です。頻繁に使用される手法は URL 書き換えと呼ばれ、URL パスの末尾にセッション ID を直接追加します。例: http://damonare.cn?sessionid=123456 フォーム隠しフィールドと呼ばれるテクノロジーもあります。つまり、サーバーは自動的にフォームを変更し、非表示フィールドを追加して、フォームの送信時にセッション ID をサーバーに返すことができるようにします。例:




実際、この手法は、アクションに URL 書き換えを適用することで簡単に置き換えることができます。

2.3 Cookieとセッションの簡単な比較

Cookieとセッションの違い:

1) Cookieデータは顧客のブラウザに保存され、セッションデータはサーバーに配置されます。

2) Cookie はあまり安全ではありません。ローカルに保存された Cookie を分析して、セキュリティ上の理由からセッションを使用する必要があります。

3) セッションはサーバーに一定期間保存されます。アクセスが増加すると、サーバーのパフォーマンスがさらに消費され、サーバーのパフォーマンスを低下させるために Cookie を使用する必要があります。

4) 1 つの Cookie によって保存されるデータは 4K を超えることはできず、多くのブラウザーではサイトで保存できる Cookie は 20 個までに制限されています。

5) したがって、次のことが推奨されます:

ログイン情報などの重要な情報をSESSIONとして保存する

他の情報を保持する必要がある場合は、Cookieに配置できます

2.4 document.cookie属性

expires属性

を指定しますデフォルトでは、Cookie はブラウザーのセッション中にのみ存在します。これらの値は、Cookie を一定期間存続させると失われます。時刻の場合は、expires 属性を将来の有効期限日に設定します。これは、Cookie の有効期間を秒単位で設定する max-age 属性に置き換えられました。

path属性

Cookieに関連付けられたWebページを指定します。デフォルトでは、Cookie は、それを作成した Web ページ、Web ページと同じディレクトリ内の Web ページ、およびこの Web ページが配置されているディレクトリのサブディレクトリ内の Web ページに関連付けられます。

domain 属性

domain 属性を使用すると、複数の Web サーバーが Cookie を共有できます。ドメイン属性のデフォルト値は、Cookie を作成した Web ページが存在するサーバーのホスト名です。 Cookie のドメインを、サーバーが配置されているドメイン以外のドメインに設定することはできません。たとえば、order.damonare.cn にあるサーバーが、catalog.damonare.cn によって設定された Cookie 値を読み取れるようにします。 catalog.damonare.cn ページによって作成された Cookie がそのパス属性を「/」に設定し、ドメイン属性を「.damonare.cn」に設定した場合、すべての Web ページはcatalog.damonare.cn に配置され、すべてのページは orlders に配置されます。 damonare .cn Web ページ、および damonare.cn ドメインにある他のサーバー上の Web ページは、この Cookie にアクセスできます。

secure 属性

ネットワーク上で Cookie を送信する方法を指定するブール値です。デフォルトでは安全ではなく、通常の http 接続を通じて送信されます

2.5 Cookie の実践

ここでは、JavaScript を使用して Cookie を書き込みます。 w3cschool のデモをお借りしました:

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return "";
}

function setCookie(c_name,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toUTCString())
}
function checkCookie(){
    username=getCookie('username')
    if(username!=null && username!=""){alert('Welcome again '+username+'!')}
    else{
        username=prompt('Please enter your name:',"")
        if (username!=null && username!=""){
            setCookie('username',username,355)
        }
    }
}

ここで Cookie の有効期間が 355 日と定義されていることに注意してください

3. localStorage

これは永続的なストレージ方法であり、手動でクリアしないとデータが消去されます。永遠に期限切れになりません。

また、Key-Value メソッドを使用してデータを保存します。基礎となるデータ インターフェイスは sqlite であり、データはドメイン名に従って対応するデータベース ファイルに保存されます。より大きなデータ (IE8 では 10MB、Chrome では 5MB) を保存でき、帯域幅の無駄を避けるために保存されたデータはサーバーに送信されません。

3.1 localStorageの属性メソッド

次の表は、localStorageの属性とメソッドの一部です

Javascript ローカル ストレージの概要

3.2 localStorageの欠点

① localStorageのサイズは約500万文字に制限されており、ブラウザごとにばらつきがあります

② localStorage はプライバシーモードになっており、読み取れません

③ localStorage の本質は、ファイルの読み書きです。大量のデータがある場合、スタックします (Firefox はデータを一度にメモリにインポートします)。考えると怖いです)

④ localStorage はクローラーによってクロールされませんので、使用しないでください。URL パラメーターの受け渡しを完全に置き換えます

4. sessionStorage

は、サーバー側で使用されるセッションに似ています。 -レベルのキャッシュ。ブラウザを閉じるとデータは消去されます。ただし特別なのは、その有効範囲がウィンドウ レベルであることです。つまり、sessionStorage データは異なるウィンドウ間で共有できません。利用方法(localStorageと全く同じ):

Javascript ローカル ストレージの概要

5. sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户关闭浏览器窗口后,数据立马会被删除。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。第二天、第二周或下一年之后,数据依然可用。

5.1 测试

sessionStorage:

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
      sessionStorage.pagecount=1;
}
console.log("Visits "+ sessionStorage.pagecount + " time(s).");

测试过程:我们在控制台输入上述代码查看打印结果

控制台首次输入代码:

Javascript ローカル ストレージの概要

关闭窗口,控制台再次输入代码:

Javascript ローカル ストレージの概要

所谓的关闭窗口即销毁,就是这样,关闭窗口重新打开输入代码输出结果还是上面图片的样子,也就是说关闭窗口后sessionStorage.pagecount即被销毁,除非重心创建。或者从历史记录进入才会相关数据才会存在。好的,我们再来看下localStorge表现:

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
 }
console.log("Visits "+ localStorage.pagecount + " time(s).");

控制台首次输入代码:

Javascript ローカル ストレージの概要

关闭窗口,控制台再次输入代码:

Javascript ローカル ストレージの概要

6. web Storage和cookie的区别

Web Storage(localStorage和sessionStorage)的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。