JS在瀏覽器中存儲用戶名和密碼的操作方法

更新時間：2023年06月16日 16:00:16 作者：張占嶺

當用戶進行登錄頁后，直接從localStorage中把用戶名和密碼取出來，填充到表單里，對用戶體驗來說十分不錯，今天通過本文給大家分享JS在瀏覽器中對用戶名和密碼進行存儲,需要的朋友可以參考下

base64函數(shù)

btoa() 和 atob() 是 JavaScript 中的標準函數(shù)，通常在現(xiàn)代瀏覽器中都能正常工作。然而，它們在處理非 ASCII 字符時可能存在一些兼容性問題。

這些函數(shù)的主要限制在于它們僅支持 ASCII 字符集，對于非 ASCII 字符（如 Unicode 字符）可能會產(chǎn)生不可預測的結(jié)果。在處理非 ASCII 字符時，你可能需要使用其他方法或庫來確保正確的編碼和解碼。

另外，btoa() 和 atob() 函數(shù)是瀏覽器原生提供的，而不是 jQuery 特有的函數(shù)。它們在大多數(shù)現(xiàn)代瀏覽器中得到支持，包括 Chrome、Firefox、Safari 和 Edge。但是，對于一些舊版本的瀏覽器，特別是舊版本的 Internet Explorer，可能不支持這些函數(shù)。

為了兼容性和更好的跨瀏覽器支持，你可以考慮使用現(xiàn)代的 JavaScript 庫，如 Base64.js 或 CryptoJS，它們提供了跨瀏覽器的 Base64 編碼和解碼功能。

總之，btoa() 和 atob() 在大多數(shù)現(xiàn)代瀏覽器中都能正常工作，但對于非 ASCII 字符和一些舊版本的瀏覽器可能存在兼容性問題。對于更廣泛的兼容性和功能需求，使用專門的 Base64 編碼庫可能是一個更好的選擇。

localStorage

localStorage是瀏覽器提供的一種機制，用于在客戶端（即瀏覽器）中存儲和檢索數(shù)據(jù)。它允許你以鍵值對的形式將數(shù)據(jù)保存在瀏覽器的本地存儲空間中，并且這些數(shù)據(jù)在頁面刷新或關(guān)閉后仍然可用。

下面是使用jQuery與localStorage進行數(shù)據(jù)存儲和檢索的示例：

// 存儲數(shù)據(jù)到localStorage
localStorage.setItem('key', 'value');
// 從localStorage中檢索數(shù)據(jù)
var value = localStorage.getItem('key');
// 刪除localStorage中的數(shù)據(jù)
localStorage.removeItem('key');

在上述示例中，localStorage.setItem()用于將數(shù)據(jù)存儲到localStorage中，它接受一個鍵和一個值作為參數(shù)。localStorage.getItem()用于檢索指定鍵的值，它接受一個鍵作為參數(shù)，并返回對應的值。localStorage.removeItem()用于從localStorage中刪除指定鍵的數(shù)據(jù)，它接受一個鍵作為參數(shù)。

請注意，localStorage中存儲的數(shù)據(jù)是以字符串的形式進行存儲的。如果你需要存儲和檢索非字符串類型的數(shù)據(jù)（例如對象或數(shù)組），你可以使用JSON.stringify()將其轉(zhuǎn)換為字符串，然后使用JSON.parse()將其轉(zhuǎn)換回原始類型。

下面是一個使用jQuery和localStorage存儲和檢索對象數(shù)據(jù)的示例：

// 存儲對象到localStorage
var data = { key: 'value' };
localStorage.setItem('obj', JSON.stringify(data));
// 從localStorage中檢索對象數(shù)據(jù)
var storedData = JSON.parse(localStorage.getItem('obj'));
console.log(storedData.key); // 輸出: value

在上述示例中，我們將一個對象存儲到localStorage中時，使用JSON.stringify()將其轉(zhuǎn)換為字符串進行存儲。然后，使用JSON.parse()將存儲的字符串轉(zhuǎn)換回對象形式進行檢索。

總之，jQuery可以與localStorage一起使用，以便在客戶端瀏覽器中存儲和檢索數(shù)據(jù)。

對用戶名和密碼進行存儲

當用戶進行登錄頁后，直接從localStorage中把用戶名和密碼取出來，填充到表單里，對用戶體驗來說十分不錯；像瀏覽器的記住密碼功能是有安全隱患的，因為其它人通過你的電腦，就可以看到你的密碼了，不是很安全。

// 頁面加載后填充用戶名和密碼
  var username = localStorage.getItem("c");
  var obj=JSON.parse(atob(username));
  $("#email-phone").val(obj.username);
  $("#passwordFront").val(obj.password);
// 提交表單時，存儲用戶名和密碼，為了安全，我們的密碼在post傳遞時，是加密之后的，明文密碼不進行提交，保證了安全性，雖然目前有了https，保存了它在傳輸過程中的安全性，但像大型網(wǎng)站還是對這塊進行了加密
  $("#password").val(encryption($("#passwordFront").val()));
  var obj= {username:$("#email-phone").val(), password: $("#passwordFront").val()};
  localStorage.setItem("c", btoa(JSON.stringify(obj)));
  $("#passwordFront").remove();
  $("#form-login").submit();

到此這篇關(guān)于JS在瀏覽器中對用戶名和密碼進行存儲的文章就介紹到這了,更多相關(guān)js瀏覽器存儲用戶名和密碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: