クライアント・ストレージ・テクノロジー

クッキーは広くサポートされている、非常に基本的なクライアント側のストレージであります

複数のクッキーメソッドを作成します

document.cookie = 'name=Jim'
document.cookie = 'age=18'

あなたはこれだけのように一つ一つを作成することができ、複数のクッキーを作成するときは、複数作成することはできません

同じ名前のクッキーは一つだけ、したがって同じ名前にすると、元のクッキーを修正するためにクッキーと同等を作成することができます

document.cookie = 'age=20'

この時点では、と呼ばれるageCookieの値は18なり20

ブラウザを閉じたときにクッキーを作成し、このようなデフォルトとして、メタデータの時に指定することができ、クッキーは、指定された有効期限場合、クッキーが指定された記事で、この時間を保存することができ、削除されます。

document.cookie = 'age=20; expires=Fri, 31 Dec 2019 23:59:59 GMT'

過去の時間に有効期限は、物品は、クッキー方式を削除することでクッキーを、削除されます

読書するときは、現在のすべてのクッキークッキーからなる文字列を取得することができます

var cookies = document.cookie
console.log(cookies) // "name=Jim; age=20; ..."

残念ながら、指定されたバークッキーを取得する方法はありません、クッキーは、メタデータを取得することはできません

クッキー片の一定値、クッキー文字列を取得する必要が唯一与えるために操作することができる場合

指定された値と一致するように定期的にクッキーを使用しました

var age = /age=([^;]+);?/.exec(document.cookie)[1]

あなたは、直接ブラウザの開発ツールでクッキーを表示および編集することができます

クッキー

ここで簡単にクッキー、操作できるライブラリですJavaScriptのクッキーは、

独自のCookieストアの量は、通常の状況下では、あまりにも多くのデータを保存するのに適した、限定されるものではないが、あまりにも多くのクッキーに保存されているクライアントの要求はより大きな容量の原因となりますので、もしクッキーは、通常、バックグラウンドへの要求と一緒に提出されることを言及する価値がありますクッキーを使用することをお勧めしません、より良い選択は、Webストレージであります

ウェブストレージ

ウェブストレージをローカルストレージに分割され、セッションストレージは、両方が同じ、時間差のみが保存されているのと同じではない使用します

ブラウザが決定する際に使用するウェブストレージをサポートしているかどうかを判断しています

if ('sessionStorage' in window && window.sessionStorage) {
  sessionStorage.setItem('key', 'value')
}

if ('localStorage' in window && window.localStorage) {
  localStorage.setItem('key', 'value')
}

基本的な使い方

// 存储
// Web Storage 只能存储字符串值
// 因此对于复杂的数据可以转换为 JSON 格式
localStorage.setItem('names', JSON.stringify(['Jim', 'Lee']))

// 读取
// 对于 JSON 格式的数据需要解析
var names = JSON.parse(localStorage.getItem('names'))

// 删除
localStorage.removeItem('names')

// 全部删除
localStorage.clear()

ローカルストレージの期間にそれを設定する方法を、次に、ブラウザを閉じたときにセッションストレージが削除され、ローカルストレージは、地元の店で継続されます

蓄積時間が現在の時刻よりも小さい場合に値を取り出し、現在時刻と比較し、この時間は、データが既に物品とみなされている間、プログラムは、時間値、時刻取得されたデータストレージながら、データ記憶装置として記憶することができます期間中、およびそのデータの削除

localStorage.setItem('names', JSON.stringify(['Jim', 'Lee']))
localStorage.setItem('_names_expires', new Date().getTime() + 3000) // 只存储3秒种

if (localStorage.getItem('_names_expires') < new Date().getTime()) {
  // 存储的时间小于当前时间，删除该条数据
  localStorage.removeItem('names')
  // 同时把时间值也删除
  localStorage.removeItem('_names_expires')
}

ウェブストレージに関連付けられても、ストレージ・イベント、格納された値が変更されたとき、それはイベントがトリガされますがあります

// 绑定事件处理程序
window.addEventListener('storage', function(event) {
  console.log('旧值: ' + event.oldValue)
  console.log('新值: ' + event.newValue)
  console.log('键名: ' + event.key)
})

localStorage.setItem('username', 'Jim')

あなたはストレージは、Webストレージでのブラウザの別のインスタンスのイベントで変更する必要があるため、何も、起こらなかったでしょう上記のコードの実装は、トリガー新しいブラウザタブを開いて、同じアドレスを入力して、新しいタブで変更しますウェブストレージ

localStorage.setItem('username', 'Lee')

元コンソール]タブでは、情報をプリントアウト見ることができます

旧值: Jim
新值: Lee
键名: username

あなたは、ブラウザの開発者向けツールでローカルストレージとセッションストレージを表示および編集することができます

ストレージ

ここでは、ライブラリをより簡単に、ウェブストレージを操作することができますStore.jsをウェブストレージをサポートしていない人のためのライブラリは、ブラウザ互換のプログラムを提供し、