HTML5的LocalStorage实现记住密码

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

一、判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
 alert("浏览支持localStorage")
}
else
{
 alert("浏览暂不支持localStorage")
}
//或者 if(typeof window.localStorage == ‘undefined‘){ alert("浏览暂不支持localStorage") }

  

二、代码demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>localStorage</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<form action="" method="post" onsubmit="return loginBtn_click();">
        <h3>Log in</h3>
        <input type="text" name="user" placeholder="user" id="user">
        <input type="password" name="pass" placeholder="password" id="pass">
        <input type="checkbox" id="remember" checked><br/><br/>
        <input type="submit" id="sub">
    </form>
</body>
<script type="text/javascript">
    $(document).ready(function(){

        var strName = localStorage.getItem(‘keyName‘);
        var strPass = localStorage.getItem(‘keyPass‘);
        if(strName){
            $(‘#user‘).val(strName);
        }if(strPass){
            $(‘#pass‘).val(strPass);
        }

    });

    function loginBtn_click(){
            var strName = $(‘#user‘).val();
            var strPass = $(‘#pass‘).val();
            localStorage.setItem(‘keyName‘,strName);
            if($(‘#remember‘).is(‘:checked‘)){
                localStorage.setItem(‘keyPass‘,strPass);
                alert("记住密码");
            }else{
                localStorage.removeItem(‘keyPass‘);
                alert("部记住密码");
            }
            window.location.reload();
        }
</script>
</html>

三.localStorage的基本用法:

setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
localStorage.setItem("site", "js8.in");

getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var site = localStorage.getItem("site");

removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
localStorage.removeItem("site");

clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
localStorage.clear();

原文地址:

超简单的localStorage实现记住密码的功能

其他资料:

HTMl5的存储方式sessionStorage和localStorage详解

javascript记住用户名和登录密码(两种方式)cookie

原文地址:https://www.cnblogs.com/Dream2hc/p/web144597.html

时间: 2024-11-08 11:12:08

HTML5的LocalStorage实现记住密码的相关文章

localStorage保存账号密码

首先是判断浏览器是否支持这一属性,他是HTML5里的属性: if(window.localStorage){ alert('支持');}else{ alert('不支持');} localStorage.a = 3;//设置a为"3"localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值localStorage.setItem("b","isaac"

基于localStorge开发登录模块的记住密码与自动登录

前沿||我是乐于分享,善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个哥们说有私活,开发一个****模块,我那天手痒痒就和他聊了两句,然后,就决定给她做这个模块了,和他谈了谈交付时间,他说最迟两天,然后谈了谈加个,最后达成,500¥!!!这个模块其实第一天晚上我就开发出来了,那时我给他微信说,功能模块开发ok了,要不要远程查看一下,没问题的话就交了,一会他回我,好了就

登陆jq表单验证及jqcookie记住密码实例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

登陆——记住密码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A fully featured ad

vue中使用cookies和crypto-js实现记住密码和加密

不多BB,搞快.搞快. 使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.lo

Android实战(一)学习了多个控件实现登录及记住密码功能

首先确定一下需要的控件: 两个EditText:用于输入账号和密码 一个button:用于登录查看账号和密码是否正确 一个checkbox:用于记住密码和账户 一个Androidstudio:用于编写代码,当然牛逼的人也推荐使用记事本写代码,废话不多说开工. 创建一个App项目加入两个布局两份Java.class ,在Androidmanifest.xml里面注册第二个布局. 准备完毕 1.在初始布局中加入上述控件,并为其设置好id 代码如下所示 <LinearLayout xmlns:andr

登录记住密码功能的实现

用户登录信息开始是利用session保存,短时间内通过判断session可以不用登录,但是时间长或者在关闭浏览器重启之后,还是需要登录操作.而“智慧资产”网站主要在手机网页上使用,一般一个用户一部手机,不需要频繁登录,而且安卓用户一般在使用app软件后,选择关闭退出app软件. 解决这个问题,我利用有效时长为30天的cookie保存用户名和密码,实现“记住我”的功能. 在实现过程中,重新学习了解了cookie和session机制:session.cookie与“记住我的登录状态”的功能的实现 C

作品第一课----记住密码提示框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { margin-left: 43%; } p { font: 12px/1.5 Tohama; border: 1px solid #

Android &#39;记住密码&#39;功能

1.运行后界面图 2.主要代码: 2.1 activity_main.xml(2个TextView 2个EditText 1个CheckBox以及1个Button): 1 <TextView 2 android:id="@+id/tvAccount" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:layout_al