js~在瀏覽器中對用戶名和密碼進行存儲

来源:https://www.cnblogs.com/lori/archive/2023/06/16/17485022.html
-Advertisement-
Play Games

# base64函數 `btoa()` 和 `atob()` 是 JavaScript 中的標準函數,通常在現代瀏覽器中都能正常工作。然而,它們在處理非 ASCII 字元時可能存在一些相容性問題。 這些函數的主要限制在於它們僅支持 ASCII 字元集,對於非 ASCII 字元(如 Unicode 字 ...


base64函數

btoa()atob() 是 JavaScript 中的標準函數,通常在現代瀏覽器中都能正常工作。然而,它們在處理非 ASCII 字元時可能存在一些相容性問題。

這些函數的主要限制在於它們僅支持 ASCII 字元集,對於非 ASCII 字元(如 Unicode 字元)可能會產生不可預測的結果。在處理非 ASCII 字元時,你可能需要使用其他方法或庫來確保正確的編碼和解碼。

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

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

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

localStorage

localStorage是瀏覽器提供的一種機制,用於在客戶端(即瀏覽器)中存儲和檢索數據。它允許你以鍵值對的形式將數據保存在瀏覽器的本地存儲空間中,並且這些數據在頁面刷新或關閉後仍然可用。

下麵是使用jQuery與localStorage進行數據存儲和檢索的示例:

// 存儲數據到localStorage
localStorage.setItem('key', 'value');

// 從localStorage中檢索數據
var value = localStorage.getItem('key');

// 刪除localStorage中的數據
localStorage.removeItem('key');

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

請註意,localStorage中存儲的數據是以字元串的形式進行存儲的。如果你需要存儲和檢索非字元串類型的數據(例如對象或數組),你可以使用JSON.stringify()將其轉換為字元串,然後使用JSON.parse()將其轉換回原始類型。

下麵是一個使用jQuery和localStorage存儲和檢索對象數據的示例:

// 存儲對象到localStorage
var data = { key: 'value' };
localStorage.setItem('obj', JSON.stringify(data));

// 從localStorage中檢索對象數據
var storedData = JSON.parse(localStorage.getItem('obj'));
console.log(storedData.key); // 輸出: value

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

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

對用戶名和密碼進行存儲

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

// 頁面載入後填充用戶名和密碼
  var username = localStorage.getItem("c");
  var obj=JSON.parse(atob(username));
  $("#email-phone").val(obj.username);
  $("#passwordFront").val(obj.password);
// 提交表單時,存儲用戶名和密碼,為了安全,我們的密碼在post傳遞時,是加密之後的,明文密碼不進行提交,保證了安全性,雖然目前有了https,保存了它在傳輸過程中的安全性,但像大型網站還是對這塊進行了加密
  $("#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();

作者:倉儲大叔,張占嶺,
榮譽:微軟MVP
QQ:853066980

支付寶掃一掃,為大叔打賞!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • > 上一篇文章從理論上對Kotlin協程進行了部分說明,本文將在上一篇的基礎上,從實戰出發,繼續協程之旅。 ### 從源頭說起 在Kotlin中,要想使用協程,首先需要使用協程創建器創建,但還有個前提——協程作用域(`CoroutineScope`)。在早期的Kotlin實現中,協程創建器是一等函數 ...
  • > 上一篇文章,我介紹了Kotlin協程的創建,使用,協作等內容。本篇將引入更多的使用場景,繼續帶你走進協程世界。 ### 使用協程處理非同步數據流 常用編程語言都會內置對同一類型不同對象的數據集表示,我們通常稱之為容器類。不同的容器類適用於不同的使用場景。Kotlin的`Flow`就是在非同步計算的需 ...
  • “聊技術無話不談,一起來吹吹元服務!暢聊你對元服務的想法,說不定,你就能撬動元服務的爆發增長!” 元服務(即原子化服務)是華為“輕量化”服務的新物種,可提供全新的服務和交互方式,讓應用化繁為簡,讓服務觸手可及!基於鴻蒙萬能卡片,元服務可實現應用功能在桌面“永遠打開”,實現智能推薦、服務直達! 而在元 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 npm包:sta-datepicker 效果圖 需求 普通的時間選擇器要麼只能單選,要麼只能選範圍,不可以隨意選擇若幹個時間,同時大多數現成的時間選擇器選擇結束會收起來,很不方便。現在需求如下 1、可以自己控制展開收起 2、可以選擇不連續 ...
  • ##正則表達式規則 | 表達式 | 描述 | | | | | [0-9] | 查找任何從 0 至 9 的數字。例如,匹配: '111' ,不匹配:'eee' | | [abc] | 查找方括弧之間的任何字元。例如,/[123]/ 匹配 "1234567" 中的 "123","1" 中的 "1"。但是 ...
  • 起因 一個feature開發, 結果需求評審、工時預估, 簡直是事故級別的. 最後, 迫於無奈, 全組人都得上去救火... 今天, 幫忙改bug的時候, 發現新checkout下來的代碼, 還帶著新鮮的語法錯誤...簡直大無語. 翻了遍代碼, 發現很多地方都存在Array.reduce類型重載相關的 ...
  • ## 背景 最近在給業務組件庫集成指令庫,將各個項目中常用的指令如一鍵複製、元素和彈窗拖拽等封裝到一起,進行統一發版維護。 業務組件庫項目架構採用的是pnpm+vite+vue3+vitepress,其中vitepress主要做組件庫文檔站點同時展示可交互的組件。 ## 問題 開發運行時指令庫dem ...
  • 從 ES2019 中開始引入了一種扁平化數組的新方法,可以展平任何深度的數組。 ### flat `flat()` 方法創建一個新數組,其中所有子數組元素以遞歸方式連接到特定深度。 > 語法:array.flat(depth) - **array** : `flat()` 方法將在給定的數組中使用。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...