IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 关于js本地Window sessionStorage 的一些了解 -> 正文阅读

[JavaScript知识库]关于js本地Window sessionStorage 的一些了解

?

目录

?

一:定义和使用

二:语法

三:返回值

四:小案例:


一:定义和使用

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据,

在关闭窗口或标签页之后将会删除这些数据。

提示:?如果你想在浏览器窗口关闭后还保留数据,可以使用?localStorage?属性, 该数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。

二:语法

window.sessionStorage

保存数据语法:

sessionStorage.setItem("key", "value");

读取数据语法:

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法:

sessionStorage.removeItem("key");

删除所有数据:

sessionStorage.clear();

三:返回值

返回值:一个存储对象

四:小案例:

?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="mm"></div>
    <br> <button id="btn">登录</button><br>
    <br>
    <button id="del">退出登录</button>
    <br>
    用户名:
    <input id="user" type="text" placeholder="你的用户名">
    <br>
    密码:
    <input id="pwd" type="text" placeholder="密码">
</body>
<script>

    //存储
    var user = document.getElementById("user");
    var pwd = document.getElementById("pwd");

    user.onblur = function () {
        var userval = user.value;
        var username = sessionStorage.setItem("username", userval);
        console.log(userval);
    }

    pwd.onblur = function () {
        var pwdval = pwd.value;
        var username = sessionStorage.setItem("userpwd", pwdval);
        console.log(pwdval);
    }
    //获取
    var mm = document.getElementById("mm");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        mm.innerHTML = sessionStorage.getItem("username");
    }
    // 删除
    var del = document.getElementById("del");
    del.onclick = function () {
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("userpwd");
        history.go(0);
    }

    //如果有值显示,没有就跳转
    window.onload = function () {
        if (sessionStorage.getItem("username")) {
            alert("欢迎你尊敬的");
            mm.innerHTML = sessionStorage.getItem("username");
        }
        else {
            alert("请登录");
            
            // window.location.href="index.html" 
        }
    };
</script>

</html>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-24 10:44:41  更:2022-01-24 10:45:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 13:05:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码