JS在浏览器中存储用户名和密码的操作方法

 更新时间:2023年06月16日 16:00:16   作者:张占岭  
当用户进行登录页后,直接从localStorage中把用户名和密码取出来,填充到表单里,对用户体验来说十分不错,今天通过本文给大家分享JS在浏览器中对用户名和密码进行存储,需要的朋友可以参考下

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();

到此这篇关于JS在浏览器中对用户名和密码进行存储的文章就介绍到这了,更多相关js浏览器存储用户名和密码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript读取中文cookie时的乱码问题的解决方法

    JavaScript读取中文cookie时的乱码问题的解决方法

    读取中文cookie时出现乱码,下面是具体的解决方法,大家以后使用过程中,尽量不要用中文。
    2009-10-10
  • js实现滚动条自动滚动

    js实现滚动条自动滚动

    这篇文章主要为大家详细介绍了js实现滚动条自动滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 从零搭一个自用的前端脚手架的方法步骤

    从零搭一个自用的前端脚手架的方法步骤

    这篇文章主要介绍了从零搭一个自用的前端脚手架的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 微信小程序后端实现授权登录

    微信小程序后端实现授权登录

    这篇文章主要介绍了微信小程序后端实现授权登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • express异步函数异常捕获示例详解

    express异步函数异常捕获示例详解

    这篇文章主要给大家介绍了关于express异步函数异常捕获的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    这篇文章主要介绍了JavaScript 函数用法,结合实例形式分析了JavaScript函数定义、参数、绑定、作用域、闭包、回调函数、柯理化函数等相关概念、原理与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript 提升运行速度之循环篇 译文

    JavaScript 提升运行速度之循环篇 译文

    根据Nicholas 的说法,有四种代码 会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM 调用。
    2009-08-08
  • JavaScript中的console.group()函数详细介绍

    JavaScript中的console.group()函数详细介绍

    这篇文章主要介绍了JavaScript中的console.group()函数详细介绍,当程序调试日志过多时会有些杂乱,此时可以使用console.group()函数调来分组显示,需要的朋友可以参考下
    2014-12-12
  • 总结JavaScript中布尔操作符||与&&的使用技巧

    总结JavaScript中布尔操作符||与&&的使用技巧

    这篇文章主要介绍了总结JavaScript中布尔操作符||与&&的使用技巧,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-11-11
  • js实现五星评价功能

    js实现五星评价功能

    本文主要介绍了js实现五星评价功能和印象评价功能的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论