JavaScriptでパスワードをブラウザに保存させる

やったこと

前回(bottleで404ページを作成してみた。)の続き。

今回行ったのは、JavaScriptを用いて、メールアドレスとパスワードを保存させる機能を追加した。

ファイル構成

.
├── form.py
├── views
│  └── base.html
│  └── form.html
│  └── form_failed.html
│  └── 404.html
└── static
  └── main.js

 

作成コード

JavaScriptファイルに以下のコードを追加。

// メールアドレスとパスワードをブラウザに保存する
function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

HTMLファイルに変更は加えていないが、以下のように「送信」ボタンのところに『type = “submit”』がないとダメらしい。

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>Togglのデータをエクスポートするツールです。</h1>
	<form action = "/download" method = "post">
		メールアドレス<span class = "badge badge-danger">必須</span>   : <input name = "email" type = "email"  placeholder = "example@gmail.com" required/><br>
		パスワード<span class = "badge badge-danger">必須</span>     : <input name = "password" type = "password" autocomplete="off" placeholder="xxxxxxxx" required/><br>
		データ取得開始日<span class = "badge badge-danger">必須</span> :<input name = "start_date" type = "date" id = "start_date" required/><br>
		データ取得終了日<span class = "badge badge-danger">必須</span> :<input name = "end_date" type = "date" id = "end_date" required/><br>
		<button type = "submit" class = "btn btn-primary" id = "download">ダウンロード</button>
	</form>
</div>

{% endblock %}

(参考ページ)
[ajax] パスワードを保存するようブラウザに指示するにはどうすればよいですか?

実行結果

一度メールアドレスとパスワードを保存させると、ブラウザをリロードしてもメールアドレスとパスワードが自動で入力された状態になる。

また、URLの右側に鍵のマークが表示されており、クリックするとメールアドレスとパスワードの管理の画面になる。

つまづいたところ

特になし。

やってみた感想

はじめはCookieを用いてメールアドレスとパスワードを保存させようと思っていたが、
今回の場合だとCookieを使うよりも、ブラウザに保存させたほうがいいと判断した。

その他参考記事

Cookieを用いてブラウザに保存させようと思えば、以下の記事が参考になるかもしれない。
jQuery【 cookie 】データを保持するクッキーの使用方法
JSでブラウザにデータを保存する(store.js)
Javascriptでキャッシュにデータを保存&読み出ししたい

コメント

タイトルとURLをコピーしました