JavaScript の完全な分析 - ローカル ストレージの概念と使用法の詳細

ローカル ストレージの概念:

これは、ブラウザにデータを保存できるようにブラウザが提供するものです。

共通のローカル ストレージ

ローカルストレージ

セッションストレージ

ローカルストレージ

特徴：

1. 長期保管、手動で削除しない限り、常にブラウザに保存され、キャッシュをクリアするかブラウザをアンインストールすると消えます

2. クロスページ通信が可能です。つまり、あるページに書いたものを別のページで読むことができます。

保存

4. 文法:window.localStorage.setItem(名字,值)

注: 文字列型のデータのみ保存でき、その他のデータ型は保存できません

入手

文法：window.localStorage.getItem(名字)

注：保存するのは文字列型、取り出すのも文字列型

戻り値:

+ このデータが localStorage にある場合、得られる値はこのデータの値です
+ localStorage にそのようなデータがない場合、得られる値は null です

消去

文法：window.localStorage.removeItem(名字)

機能: localStorage 内のデータを削除することです

// 保存 
var num = 200 
window.localStorage.setItem('a', num) 
// 获取 
var res = window.localStorage.getItem('b') 
console.log(res); 
console.log(typeof res); 
// 删除 
window.localStorage.removeItem('a')

セッションストレージ

特徴：

1. セッションストレージ、つまりブラウザを閉じると、
2. ページ間で通信できます (必須)
3. 要件: このページはリダイレクトする必要があります

保存

文法：window.sessionStorage.setItem(名字,值)

注: 文字列型のデータのみ保存でき、その他のデータ型は保存できません

入手

文法：window.sessionStorage.getItem(名字)

注：保存するのは文字列型、取り出すのも文字列型

戻り値:

+ このデータが sessionStorage にある場合、取得される値はこのデータの値になります
+ sessionStorage にそのようなデータがない場合は null になります

消去

文法：window.sessionStorage.removeItem(名字)

機能: sessionStorage 内のこのデータを削除することです

// 保存 
window.sessionStorage.setItem('a', 300) 
// 获取 
var res = window.sessionStorage.getItem('a') 
console.log(res); 
console.log(typeof res); 
// 删除 
window.sessionStorage.removeItem('a')

ブラウザのローカル ストレージ - Cookie

特徴：

1. 固定形式で文字列のみ格納可能

=>キー=値; キー 2 = 値 2; キー3=値3

2. Cookie の保存サイズには制限があります

⇒4KB程度

3. 保管の適時性

=> デフォルトはセッション レベルのエージングです。手動で有効期限を設定できます

4. 操作はサーバーに依存する必要があります

=> ローカルで開いたページは Cookie を操作できません

=> つまり、保存も読み込みもできません。

=> サーバー上でページを開く必要があります

5. フロントエンドとバックエンドのリクエストに従って、自動的に実行します

=> Cookie スペースにコンテンツがある限り

=> ページとバックエンド間の対話中に自動的に実行されます

6. フロントエンドとバックエンドの操作

=> フロントエンドは JS を使用して操作できます

=> あらゆるバックエンド言語が動作可能

7. ストレージはドメイン名に依存します

=> どのドメイン名が保存され、どのドメイン名が使用されているか

=> ドメイン名を越えて通信できません

クッキーの運用

クッキーを設定する

文法：document.cookie = 'key=value'

// 设置一条 cookie 
// 设置了一条叫做 a 的 cookie 存储的值是 100 
document.cookie = 'a=100' 
// 设置了一条叫做 b 的 cookie 存储的值是 200 
document.cookie = 'b=200' 
// 设置一条带有过期时间的 cookie 
var time = new Date() 
document.cookie = 'a=100;expires=' + time 
// 设置一条 30s 以后过期的 cookie 
var time = new Date() 
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30) 
// console.log(time) 
document.cookie = 'a=100;expires=' + time

クッキーを取得

文法：document.cookie

戻り値: 完全な Cookie 文字列

console.log(document.cookie)