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("头像信息异常!!!")
        }
  • 相关阅读:
    Kinect 开发 —— 硬件设备解剖
    Kinect 开发 —— 引言
    (转)OpenCV 基本知识框架
    OpenCV —— 摄像机模型与标定
    OpenCV —— 跟踪与运动
    OpenCV —— 图像局部与分割(二)
    OpenCV —— 图像局部与部分分割(一)
    OpenCV —— 轮廓
    OpenCV —— 直方图与匹配
    OpenCV —— 图像变换
  • 原文地址:https://www.cnblogs.com/-217/p/12325887.html
Copyright © 2011-2022 走看看