首页 > 其他分享 >js~在浏览器中对用户名和密码进行存储

js~在浏览器中对用户名和密码进行存储

时间:2023-06-16 10:55:12浏览次数:42  
标签:检索 存储 用户名 浏览器 js JSON localStorage obj

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,JSON,localStorage,obj
From: https://www.cnblogs.com/lori/p/17485022.html

相关文章

  • json 处理
    需要引入"encoding/json"包json解析到mapjsonStr:="{\"a\":\"test\",\"b\":\"testb\"}"vardatmap[string]stringerr:=json.Unmarshal([]byte(jsonStr),&dat)iferr==nil{fmt.Println(da......
  • Java的JSON处理
    Java的JSON处理用于JSON处理的JavaAPI(JSON-P)提供可移植的API,以使用对象模型和流式API来解析,生成,转换和查询JSON。JSON-P中使用JSON的两种方式有两种:流式API和对象模型API。JSON-P流式API流式API将解析和生成控制移交给程序员。流式API提供了基于事......
  • 如何降低Vue.js项目中Webpack打包文件的大小?
    结论结论:vue中,直接引用文件,可以让打包文件最小。试验记录下面测试项目中引入一个Button组件的代价。基准工程大小:[raywill:shop]npmrunbuild>shop@build/Users/raywill/code/vue/shop>cross-envNODE_ENV=productionwebpack--progress--hide-modulesHash:d902d9dc5e......
  • JS01
    如何写一段JS代码并运行写在行内<!--html--><inputtype="button"value="按钮"onclick="alert('HelloWorld');"/>写在script标签中<!--html--><head><script>alert('HelloWorld');......
  • .js .jsx .ts .tsx的区别
    .js是javascript文件的扩展名,例如main.js。.jsx是javascript文件并表明使用了JSX语法。.ts是typescript文件的扩展名.tsx表明是typescript文件并使用了JSX语法。https://zhuanlan.zhihu.com/p/435385184......
  • 【JS基础】Promise.resolve()
    Promise.resolve 静态方法将给定值“解析”为Promise。 如果值是Promise,则返回该Promise;如果值是thenable,返回的Promise会“跟随”这个thanable的对象,采用它的最终状态;否则,返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。 注意:不要在解析......
  • 【JS错题总结】关于上下文
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><script>functionfunc1(){console.log(1,this.value)}......
  • js中各种时间格式的相互切换
    js中各种时间格式的相互切换https://jingyan.baidu.com/article/d2b1d102aa60941d7e37d4fc.html前端开发中,往往需要使用到各种时间格式,包括中国标准时间,国际标准时间,时间戳,年月日的时间等,这么多种的时间格式,就需要相互转换,本文旨在介绍各种时间格式的转化方法。工具/原料Hbuilde......
  • Js基础入门
    [Js基础入门-掘金](https://juejin.cn/post/7244734132322992187)浏览器执行JS简介浏览器分成两大部分渲染引擎和JS引擎渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkitJS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后......
  • JS收藏
    2、在HTML页面中显示分数,可用如下格式:½¾⅓===============================================functionisCharsInBag(s,bag){vari;for(i=0;i<s.length;i++){varc=s.charAt(i);if(bag.indexOf(c)==-1)returnfalse;}returntrue;......