zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    jquery ajax 向后台传递数组
    定时任务
    C# 好用的插件
    C# 跳出循环
    存储区更新、插入或删除语句影响到了意外的行数(0)。实体在加载后可能被修改或删除。刷新 ObjectS
    Opencv2.4.9源码分析——HoughLinesP
    OpenCV+C++ 视频图片相互转换
    opencv2.2版本不稳定
    OpenCV 透视变换【图像归一化矫正】
    opencv配置注意事项【总结】
  • 原文地址:https://www.cnblogs.com/Dream2hc/p/web144597.html
Copyright © 2011-2022 走看看