zoukankan      html  css  js  c++  java
  • js里cookie,localStorage的简单用法

    cookie的使用场景---->注册功能(注册成功后,将账号和密码存入cookie里,在登录时显示到输入框里)

    注册的js(将数据存入cookie):        escape和unescape是对数据的加密解密方法

    document.cookie = "id" + "="+ escape(id);
    document.cookie = "password" + "="+ escape(password);
    登录的js(将数据从cookie取出):
    let ids = document.cookie.match(new RegExp("(^| )"+"id"+"=([^;]*)(;|$)"));
    let passwords = document.cookie.match(new RegExp("(^| )"+"password"+"=([^;]*)(;|$)"));
     if(ids != null && passwords != null){
            let aid = unescape(ids[2]);     //取第二段数据(蓝色标记)就是存入的数据
            let apassword = unescape(passwords[2]);
            id.value = aid;
            password.value = apassword;
     }
    **********************************************************************************************
    localStorage的使用场景---->登录功能(登陆成功后,将此账号的信息存进localStorage里,当跳转到主界面后取出数据使用)
    登录的js(将数据存入localStorage)
    let arraydata = JSON.parse(data)
    if (arraydata == "" || arraydata == null) {
        alert("账号或密码错误!")
    } else {       
        alert("登陆成功!")
    let LocalStorage = window.localStorage; 
    LocalStorage.setItem("id",arraydata.id);
    LocalStorage.setItem("password",arraydata.password);
    LocalStorage.setItem("name",arraydata.name);
    LocalStorage.setItem("role",arraydata.role);
    LocalStorage.setItem("level","99");
    }
    主界面的js(将数据从localStorage中取出):
    let LocalStorage = window.localStorage;
    if(LocalStorage.getItem("id") == null ||LocalStorage.getItem("id") == ""){
            alert("账号信息异常,请重新登录!")
            window.location.href = "Login.html";
        }
        let avatar = document.getElementById('avatar');
        let level = document.getElementById('level');

        level.innerHTML = "Lv."+LocalStorage.getItem("level");
        if(LocalStorage.getItem("role") == "士兵"){
            avatar.src = "../img/avatar4.jpg";
        }else if(LocalStorage.getItem("role") == "游侠"){
            avatar.src = "../img/avatar3.jpg";
        }else{
            avatar.src = "../img/avatar0.jpg"
            console.log("头像信息异常!!!")
        }
  • 相关阅读:
    jsoup
    【伪装位置神器】神行者AnyLocation 1.3.0001可用于微信,陌陌
    MD5 哈希等各种加密方式 都是对这个对象进行各种运算, 然后得出1个字符串
    【html】param 以及 embed 的有关 flash 属性详解
    【css】绝对定位的元素在 ie6 下不显示
    【javascript】浮点数运算问题分析及解决方法
    【jquery】邮箱自动补全 + 上下翻动
    【javascript】设为首页——setHome
    【javascript】js 检验密码强度
    【jquery】jquery 自定义滚动条
  • 原文地址:https://www.cnblogs.com/-217/p/12325887.html
Copyright © 2011-2022 走看看