button默认属性值、cookie、sessionStorage、localStorage（后台管理系统遇到的问题）

今日上上签-

已于 2023-04-22 13:28:33 修改

阅读量273

点赞数 1

分类专栏：前端文章标签： javascript html css

于 2023-04-02 12:02:35 首次发布

本文链接：https://blog.csdn.net/L19541216/article/details/129909044

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

原生js点击button会刷新页面

原因:

使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认 type=‘submit’ 这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。

解决办法：

将默认属性type=‘submit’ 改为type=‘button’

tabindex

给input中的placeholder设置位置

input::-webkit-input-placeholder{position：relative；left：20px；}

css 调整input内文字与光标的初始位置

调整input内文字、placeholder文字位置、光标位置

 input {
        /*方法一*/
	text-align = center; /*placeholder文字居中*/
	text-align = left; /*placeholder文字居左*/
	text-align = right; /*placeholder文字居右*/
	/*方法二*/
	padding-left：10px; /*placeholder文字距左10px*/
	padding-right：10px; /*placeholder文字距右10px*/
	/*方法三*/
	box-sizing:border-box;
}

即可，可以根据自己需要修改 padding-left的值

表单被撑大，注意修改

//改变密码显示与隐藏的功能
//获取一下眼睛eye
var eye = document.getElementById("eye")
var eyeChange = document.getElementById("eyeChange")
//获取一下密码框usepassword
var usepassword = document.getElementById("usepassword")
function changeStatus() {
    if (usepassword.type == "password") {
        usepassword.type = "text"
        eyeChange.src = "./img/显示.png"

    }
    else {
        usepassword.type = "password"
        eyeChange.src = "./img/隐藏.png"
    }
}

<div class="input__inner">
                    <i id="imgpassword"><img src="./img/密码.png" alt=""></i>
                    <input type="password" autocomplete="off" placeholder="密码" class="offBorder" id="usepassword" >
                    <i id="eye" onclick="changeStatus()" ><img src="./img/隐藏.png" alt="" id="eyeChange"></i>
                </div>

cookie、sessionStorage、localStorage（会话）

由于每次都输入用户名密码太累，想在自己的个人网站上添加一个记住密码功能，以前的项目是使用浏览器cookie实现的, cookie可以设置过期时间，而localStorage不行，是cookie的优势，但是cookie代码比较复杂，localStorage可以完美替代功能且代码简单，项目中不需要设置记住密码过期时间，故使用localStorage实现

在这里插入图片描述

cookie（自动登录）

如果没有设定Cookie的过期时间，则Cookie的生命周期仅保持到关闭浏览器为止。如果将过期时间设定为MaxValue，则Cookie永不过期。由于大多数浏览器对Cookie的大小限制为4KB，所以Cookie 中不能存储大量数据。如果浏览器设定了禁用Cookie，则程序中用到的Cookie 对象无效。

cookie、sessionStorage、localStorage的区别

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同

1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

三、与服务端的通信

1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

四、读写操作的便捷程度

cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作五、对于浏览器的支持

1、cookie出现的时间较早，目前见到的浏览器都支持

2、localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)

事件冒泡

有时候我们会有这种情况，点击按钮（或者指定元素）显示一个菜单栏，点击按钮和菜单栏外的区域隐藏菜单栏；

主要运用阻止事件冒泡来实现；

选项卡

当点击目录时，每个li之间的切换非常麻烦，这时采用选项卡，使用选项卡，更简洁，代码力量也大大减少。

JS部分

var imgMe = document.getElementById("imgMe")
var Vergetable = document.getElementById("Vergetable")
var Users = document.getElementById("Users")
var Order = document.getElementById("Order")
var MyInfo = document.getElementById("MyInfo")
var Exit = document.getElementById("Exit")
function showVergetable() {
    main.style.display = "block"
    UserInfo.style.display = "none"
    MyInfo.style.display = "none"
    order.style.display = "none"
    Vergetable.style.backgroundColor="rgb(54, 78, 88)"
    Users.style.backgroundColor="rgb(70, 106, 121)"
    Order.style.backgroundColor="rgb(70, 106, 121))"
    MyInfo.style.backgroundColor="rgb(70, 106, 121)"
}
function show(evt, cityName,bool) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    if(bool!=true){
    evt.currentTarget.className += " active";
    }
    
}

HTML部分

 <div class="menu">
        <ul>
            <li class="userMe">
                <div id="imgMe" onclick="show(event, 'MyInfo',true)">
                    <img src="./img/favorite.jpg" alt="">
                </div>
            </li>
            <li class="father tablinks active" id="Vergetable" onclick="show(event, 'main',false)">菜单管理</li>
            <li class="father tablinks" id="Users" onclick="show(event, 'UserInfo',false)">用户管理</li>
            <li class="father tablinks" id="Order" onclick="show(event, 'order',false)">订单管理</li>
            <li class="father tablinks" id="MyInfoa" onclick="show(event, 'MyInfo',false)">个人信息</li>
            <li class="father tablinks" id="Exit" onclick="exit()">退出登录</li>
        </ul>