1. はじめに
以前のJavaEEのJSP開発では、2つのページが値を渡す場合、セッションやリクエストを使って格納し、JSPページはEL式を使って取得していましたが、現在はフロントエンドとバックエンドを分離して開発した後、JSPを使用しません。したがって、el 式は使用できません。再度値を取得してください。現時点では、H5 のローカル ストレージがニーズを満たすことができます。
html5 のローカル ストレージ (Web ストレージ) には、次の 2 つの保存方法があります。
- セッションストレージ
- ローカルストレージ
- sessionStorage は、セッション (セッション) にデータをローカルに保存するために使用されます。このデータには同じセッション内のページからのみアクセスでき、セッションが終了すると破棄されます。
- localStorage は永続的なローカル ストレージとして使用されます。データがアクティブに削除されない限り、データは期限切れになりません。
localStorage と sessionStorage には、setItem、getItem、removeItem、clear などの同じ操作メソッドがあります。以下に localStorage を例に挙げます
次に、localStorage と Cookie の違い
1. クッキーの特徴:
テキストのみを保存できる
1 つのストレージのサイズ制限は約 4KB です
数量制限あり、一般ブラウザ、制限は50個程度
時効
2. localStorageの特徴
テキストのみを保存できる
ストレージサイズ 5M
数量無制限
手動でクリアしない限り永久に保存されます
localStorage.setItem("userName",this.userInfo.userName);
this.userName = localStorage.getItem("userName");セキュリティの低いデータはローカルに保存され、セキュリティの高いデータはサーバー側に保存されます。
3. localStorage と sessionStorage の違い:
1. sessionStorageの範囲が広くないため、アクセス後にページを閉じると現在のユーザー名がクリアされ、ユーザー名が取得できなくなります。
2. localStorage がアクセスに使用されている場合、それはクリアされず、常に存在します。
4. localStorageのメソッド
1setItemストア値
.setItem( key, value) は、キーフィールドに値を格納します。
localStorage.setItem("仕事", "バスケットボール選手")
2 getItem 値を取得
.getItem(key) 指定されたキーに対してローカルに保存されている値を取得します。
localStorage.getItem("ジョブ")。
3removeItem削除キー
.removeItem(key) は、指定されたキーを使用してローカルに保存された値を削除します。
localStorage.removeItem("ジョブ");
4 Clear はすべてのキー/値をクリアします。
.clear() はすべてのキー/値をクリアします
localStorage.clear();
5 setItem ストアの json オブジェクト
localStorage と sessionStorage は、Json オブジェクトも保存できます。保存する場合は、JSON.stringify() を使用してオブジェクトをテキスト形式に変換し、読み取る場合は、JSON.parse() を使用してテキストをオブジェクトに変換します。
例如：
要存储的JS对象
user: {userName: "admin",userPwd: 123}
//本地存储存储json对象
sessionStorage.setItem("user",JSON.stringify(user));
//取出本地存储对象
var user = sessionStorage.getItem("user");
//把字符串转换成json对象
var jsonUser = JSON.parse(user)
//取值
Var userName = jsonUser.userName;localStorage は操作を記憶しています
アイデア:
チェックボックスが選択されているかどうかを確認し、選択後、値を取得し、localStorage に保存します。。。。