小さなケース：
このログイン登録ページのケースでは、データベースに接続せず、ローカルストレージのナレッジポイントを使用してデータベースを完成させました。ローカルストレージとは何かを見てみましょう。
ローカルストレージ機能
- データはユーザーのブラウザに保存されます
- データを失うことなく、設定、読み取り、さらにはページの更新が簡単
- 大容量、sessionStorageは約5M、localStorageは約20Mです。
- 保存できるのは文字列のみで、JSON.stringify（）をエンコードした後にオブジェクトを保存できます。
window.sessionStorage
特徴
- ライフサイクルはブラウザウィンドウを閉じています
- 同じウィンドウ（ページ）でデータを共有できます
- キーと値のペアの形式で保存
使用する
データの保存：
sessionStorage.setItem(key,value)
データの取得：
sessionStorage.getItem(key)
データの削除：
sessionStorage.removeItem(key)
すべてのデータを削除します。
sessionStorage.clear()
ブラウザでこのボタンをクリックし、[アプリケーション]をクリックして、保存するデータを表示します。
これはストレージの下に保存されます。sessionStorageとlocalStorageに保存されるデータは別々です。
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值获取过来
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
//
sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
// 当我们点击了之后，清除所有的
sessionStorage.clear();
});
</script>
</body>
</html>
ただし、最初のボタンをクリックしてデータを保存すると、「wwww」と入力したデータが変数valに保存され、キーと値のペアの形式でブラウザに保存されます。正しいキーと値のペア
window.IocalStorage
特徴
- ライフサイクルは永続的であり、手動で削除しない限り、終了ページも存在します
- 複数のウィンドウ（ページ）を共有できます（同じブラウザを共有できます）
- キーと値のペアの形式で保存
使用する
データの保存：
localStoragesetItem(key,value)
データの取得：
localStorage.getItem(key)
データの削除：
localStorage.removeItem(key)
すべてのデータを削除します。
localStorage.clear()
IocalStorageの適用方法はsessionStorageと同じですが、IocalStorageのライフサイクルが永続的に有効になります。ブラウザを閉じても、次に開いたときにデータが残ります。これが最も顕著な機能です。
包括的なケース
このようなログインと登録のページがあります。記事の冒頭のように登録データを保存してから、ログインページに入力されたユーザー名とパスワードがローカルに保存されたデータに対応しているかどうかを判断する必要があります。このケースを完了するために学んだばかりのローカルストレージナレッジポイントを適用するにはどうすればよいですか？
アイデア：
配列を宣言し、登録ページに入力されたユーザー名を配列に保存し、登録ページのユーザー名とパスワードをローカルストレージを介してブラウザーに保存できます。次に、ログインページに戻り、最初に入力したユーザー名がユーザー名配列にあるかどうかを確認します。その場合、パスワードがログイン時に入力したパスワードと同じである場合は、ローカルに保存されたデータでユーザー名に対応するパスワードを見つけます。ページ、正常にログイン