濐颩 2024-08-26 17:02 采纳率: 14.3%

已结题

JavaScript

@GISer Liu

问题

我自己写了一个网站，但是它没法远程储存数据，要如何通过Javascript内置的远程储存数据的工具储存数据呢？

代码

index.html

<!DOCTYPE html>
<html lang="zh">
<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>开始</title>
    <style type="text/css">
        .div{
            width: 400px;
            height: 250px;
            background-color: #E1E9EF;
            border-radius: 10px;
            font-size: 18px;
            padding: 120px 100px;
            margin: 120px auto;
        }
        .password_submit{
            height: 40px;
            width: 300px;
            border: none;
            background-color: #F8F9F9;
            padding: 0 35px;
            font-size: 15px;
            border-radius: 5px;
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
            border-radius: 5px;
            color: saddlebrown;
            display: inline-block;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color:#fff;
            background-color: rgb(16, 185, 214);
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
            margin-top: 20px;
            }
        .password_submit:hover{
        background-color: #1795bb;
        }
        .password_submit:active{
            background-color: #1795bb;
            box-shadow: 0 5px #666;
            transform:translateY(4px);
        }
        body{
            background: url(img23.jpg);
            background-repeat:no-repeat;
            background-size:100%;
        }
    </style>
</head>
<body>
    <div class="div">
        <h1>执勤队后台登录</h1>
        <p>请输入登录密码</p>
        <input type="password" class="password" placeholder="请输入密码" id="password">
        <br>
        <input type="submit" class="password_submit" value="登录" onclick="PassWord()">
    </div>
    <script type="text/javascript">
        function PassWord()
        {
            password = document.getElementById('password').value;
            JSON.parse(password);
            if(password == "123456"){
                window.location.href="files/start.html";
            }else{
                alert("密码错误");
            }
        }
    </script>
</body>
</html>

files

chakan.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>查看队员</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>查看队员</h1>
        <h2>以下是执勤队全部队员</h2>
        <br>
        <button onclick="ChaKan()" id="button">点击此处查看</button>
        <table class="table" cellspacing="1">
            <thead>
                <tr><th>班级</th><th>姓名</th><th>状态</th><th>导师班级</th><th>导师姓名</th></tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <script src="index.js">
            console.log(localStorage.getItem("date"));
        </script>
        <a href="javascript:history.back(-1)">
            <button id="button">返回</button>           <!--返回键-->
        </a>
    </body>
</html>

index.css

#button{
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color:#fff;
    background-color: rgb(16, 185, 214);
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    margin-top: 20px;
    margin-left: 550px;
}
#button:hover{
background-color: #1795bb;
}
#button:active{
    background-color: #1795bb;
    box-shadow: 0 5px #666;
    transform:translateY(4px);
}

table, th, td {
    border: 1px solid #fff;
    }
table {
    width: 50%;
    margin-top: 20px;
    margin-left: 300px;
    color: #fff;
}

h1,h2,.input,p{
    margin-left: 500px;
}

body{
    background-color: rgb(105, 112, 0);
}

h1,h2,p{
    color: #fff;
}

index.js

/*
JavaScript函数
*/

// 加入执勤队
var dates = [];

if (localStorage.getItem("data")) { 
    dates = JSON.parse(localStorage.getItem("data")); // 把json数据转为js对象
} else {
    localStorage.setItem("data", JSON.stringify(dates));
}

function JiaRu() {
    var jiaru_class = document.getElementById('jiaru_class').value;
    var jiaru_name = document.getElementById('jiaru_name').value;
    dates.push({
        class: jiaru_class,
        name: jiaru_name,
        state: "未实习",
        daoshi_class: null,
        daoshi_name: null
    });
    localStorage.data = JSON.stringify(dates);
    alert('加入成功！');
}

// 添加实习
function ShiXi() {
    var shixi_duiyuan_class = document.getElementById('shixi_duiyuan_class').value;
    var shixi_duiyuan_name = document.getElementById('shixi_duiyuan_name').value;
    var shixi_daoshi_class = document.getElementById('shixi_daoshi_class').value;
    var shixi_daoshi_name = document.getElementById('shixi_daoshi_name').value;
    var index = dates.findIndex(item => 
        item.class === shixi_duiyuan_class && 
        item.name === shixi_duiyuan_name && 
        item.state === "未实习"
    );
    if (index !== -1) {
        dates[index] = {
            class: shixi_duiyuan_class,
            name: shixi_duiyuan_name,
            state: "未转正",
            daoshi_class: shixi_daoshi_class,
            daoshi_name: shixi_daoshi_name
        };
        localStorage.data = JSON.stringify(dates);
        alert('修改成功！');
    } else {
        alert('未找到对应记录！');
    }
}

// 转正队员
function ZhuangZheng() {
    var zhuangzheng_daoshi_class = document.getElementById('zhuangzheng_daoshi_class').value;
    var zhuangzheng_daoshi_name = document.getElementById('zhuangzheng_daoshi_name').value;
    var zhuangzheng_duiyuan_class = document.getElementById('zhuangzheng_duiyuan_class').value;
    var zhuangzheng_duiyuan_name = document.getElementById('zhuangzheng_duiyuan_name').value;
    var index = dates.findIndex(item => 
        item.class === zhuangzheng_duiyuan_class && 
        item.name === zhuangzheng_duiyuan_name && 
        item.state === "未转正"
    );
    if (index !== -1) {
        dates[index] = {
            class: zhuangzheng_duiyuan_class,
            name: zhuangzheng_duiyuan_name,
            state: "已转正",
            daoshi_class: null,
            daoshi_name: null
        };
        localStorage.data = JSON.stringify(dates);
        alert('修改成功！');
    } else {
        alert('未找到对应记录！');
    }
}

// 踢出队员
function TiChu() {
    var tichu_class = document.getElementById('tichu_class').value;
    var tichu_name = document.getElementById('tichu_name').value;
    var index = dates.findIndex(item => 
        item.class === tichu_class && 
        item.name === tichu_name
    );
    if (index !== -1) {
        dates.splice(index, 1);
        localStorage.data = JSON.stringify(dates);
        alert('删除成功！');
    } else {
        alert('未找到对应记录！');
    }
}

// 查看队员
function ChaKan() {
    var str = "";
    dates.forEach(function(item) {
        str += "<tr><td>" + item.class + "</td><td>" + item.name + "</td><td>" + item.state + "</td><td>" + item.daoshi_class + "</td><td>" + item.daoshi_name + "</td></tr>";
    });
    document.getElementById('tbody').innerHTML = str; // 假设有一个 id 为 tbody 的元素
}

jiaru.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>加入执勤队</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>加入执勤队</h1>
        <h2>请填写以下信息</h2>
        <p>班级：</p><input type="text" placeholder="请填写班级" id="jiaru_class" class="input">
        <p>姓名：</p><input type="text" placeholder="请填写姓名" id="jiaru_name" class="input">
        <br>
        <script src="index.js"></script>
        <input type="submit" onclick="JiaRu()" id="button">
        <br>
        <a href="javascript:history.back(-1)">
            <button id="button">返回</button>           <!--返回键-->
        </a>
        
    </body>
</html>

shixi.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>新增实习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>新增实习</h1>
        <h2>请填写以下信息</h2>
        <p>实习队员班级：</p><input type="text" id="shixi_duiyuan_class" placeholder="请输入实习班级" class="input">
        <p>实习队员姓名：</p><input type="text" id="shixi_duiyuan_name" placeholder="请输入实习姓名" class="input">
        <br>
        <p>导师班级：</p><input type="text" id="shixi_daoshi_class" placeholder="请输入导师班级" class="input">
        <p>导师姓名：</p><input type="text" id="shixi_daoshi_name" placeholder="请输入导师姓名" class="input">
        <br>
        <script src="index.js"></script>
        <input type="submit" onclick="ShiXi()" id="button">
        <br>
        <a href="javascript:history.back(-1)">
            <button id="button">返回</button>           <!--返回键-->
        </a>
    </body>
</html>

start.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>执勤队录入</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>执勤队录入</h1>
        <a href="jiaru.html">
            <button id="button">加入执勤队</button>
        </a>
        <br>
        <a href="shixi.html">
            <button id="button">新增实习</button>
        </a>
        <br>
        <a href="zhuangzheng.html">
            <button id="button">新增转正</button>
        </a>
        <br>
        <a href="tichu.html">
            <button id="button">踢出队员</button>
        </a>
        <br>
        <a href="chakan.html">
            <button id="button">查看队员</button>
        </a>
    </body>
</html>

tichu.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>踢出队员</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>踢出队员</h1>
        <h2>请输入以下信息</h2>
        <p>班级：</p><input type="text" placeholder="请填写班级" id="tichu_class" class="input">
        <p>姓名：</p><input type="text" placeholder="请填写姓名" id="tichu_name" class="input">
        <br>
        <script src="index.js"></script>
        <input type="submit" onclick="TiChu()" id="button">
        <br>
        <a href="javascript:history.back(-1)">
            <button id="button">返回</button>           <!--返回键-->
        </a>
    </body>
</html>

zhuangzheng.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>新增转正</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>新增转正</h1>
        <h2>请输入以下信息</h2>
        <p>导师班级：</p><input type="text" placeholder="请输入导师班级" id="zhuangzheng_daoshi_class" class="input">
        <br>
        <p>导师姓名：</p><input type="text" placeholder="请输入导师姓名" id="zhuangzheng_daoshi_name" class="input">
        <br>
        <p>实习班级：</p><input type="text" placeholder="请输入实习班级" id="zhuangzheng_duiyuan_class" class="input">
        <br>
        <p>实习姓名：</p><input type="text" placeholder="请输入实习姓名" id="zhuangzheng_duiyuan_name" class="input">
        <br>
        <script src="index.js"></script>
        <input type="submit" onclick="ZhuangZheng()" id="button">
        <br>
        <a href="javascript:history.back(-1)">
            <button id="button">返回</button>           <!--返回键-->
        </a>
    </body>
</html>

@GlSer Liu

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
吃不了席 2024-08-26 17:14
关注
以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

您好，Liu！您想要将数据存储在云端，以便您的网站可以访问这些数据。JavaScript本身并不直接支持云存储，但您可以使用各种云服务提供的API来实现这一目标。以下是一个使用Firebase实时数据库进行数据存储的示例：

首先，您需要在您的项目中引入Firebase库。您可以在HTML文件的<head>部分添加以下代码：

 <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>

接下来，您需要初始化Firebase并配置您的项目。请确保您已在Firebase控制台中创建了一个新的项目，并已获取到项目的API密钥和数据库URL。然后，在您的JavaScript文件中添加以下代码（替换为您自己的API密钥和数据库URL）：

// Your web app's Firebase configuration var firebaseConfig = { apiKey: "your-api-key", authDomain: "your-project-id.firebaseapp.com", databaseURL: "https://your-database-name.firebaseio.com", projectId: "your-project-id", storageBucket: "your-project-id.appspot.com", messagingSenderId: "your-messaging-sender-id", appId: "your-app-id" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Get a reference to the database service var database = firebase.database();

现在，您可以使用Firebase实时数据库来存储和检索数据。例如，要将一个名为“dates”的对象存储到数据库中，您可以这样做：

var dates = { class: "执勤队", name: "张三", state: "未实习" }; // Write the dates object to the database database.ref('members').push(dates);

要从数据库中读取数据，您可以使用以下代码：

// Read data from the database database.ref('members').on('value', function(snapshot) { console.log(snapshot.val()); });

这将打印出所有存储在“members”节点下的数据。您可以根据需要修改这些代码以适应您的应用程序。更多关于Firebase实时数据库的信息和文档，您可以访问官方文档：Firebase Realtime Database
解决
无用 1
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

JavaScript编程语言入门及核心功能详解
2024-12-17 17:25

适合人群：对JavaScript编程语言感兴趣的初学者或有一定编程基础但需要深入了解JavaScript的人。使用场景及目标：①了解JavaScript的基本概念和发展背景；②掌握JavaScript的变量声明、数据类型和运算符；③学会...
Web开发中JavaScript编程语言的全面解析
2024-12-22 15:10

内容概要：本文全面介绍了JavaScript语言，从基础知识到高级应用。涵盖JavaScript的背景、基本语法、函数、对象和数组、DOM操作、异步编程、事件处理以及面向对象编程、模块化和正则表达式等内容。详细解释了...
学习JavaScript编程语言的8张思维导图分享
2020-10-24 11:35

主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、...
JavaScript_Examples:JavaScript 编程语言的一些示例
2021-06-16 19:53

一些来自 JavaScript 编程语言的示例。每个示例都在一个单独的文件夹中。 unit_test_examples -- 包含如何使用 JavaScript 测试框架 QUnit 的演示。有关更多信息，请参阅博文： ://dublintech.blogspot.ie/2012/...
metaljs:JavaScript 编程语言的微框架和模式集合
2021-06-22 12:13

#金属JS JavaScript 编程语言的微框架和模式的集合。动机使 JavaScript 语言固有的通用编程模式。下载用法 function A ( parameters ) {this . a = 'a' ;this . vca = 'vca' ;this . fca = function ( ) { return '...
javascript-basic:通过https编码课程学习JavaScript编程语言基础资料
2021-04-16 11:53

通过编码课程学习JavaScript编程语言基础材料课程资料清单 A.基本原理 1. Variabel 2. Data Type 3. Operators 4. IF Statement 5. Switch Case 6. loop 数据结构 1. Object 2. Array 3. Spread Operator 4. ...
脚本编程语言：JavaScript.zip
2024-08-19 08:24

史上最全编程语言全套教程，共99门编程语言，包括：函数式编程语言 壳编程语言 常见编程语言 并行编程语言 数据分析编程语言 数据库查询语言系统编程语言 脚本编程语言 逻辑编程语言 面向对象编程语言 等所有常见...
常见编程语言：JavaScript.zip
2024-08-19 08:24

史上最全编程语言全套教程，共99门编程语言，包括：函数式编程语言 壳编程语言 常见编程语言 并行编程语言 数据分析编程语言 数据库查询语言系统编程语言 脚本编程语言 逻辑编程语言 面向对象编程语言 等所有常见...
编程语言+JavaScript+前端开发+框架比较
2024-03-01 15:47

编程语言+JavaScript+前端开发+框架比较**：这是一个关于JavaScript编程语言的前端开发的框架比较的资源，适合有一定JavaScript基础的开发者。它对比了目前流行的前端开发框架，如React、Vue、Angular等，分析了它们...
编程语言JavaScript简介
2021-01-19 17:53

JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，大部分情况下是由网页浏览器来执行的。 JavaScript 是美国 Sun 公司的注册商标，目前 Javascript 的最新版本为 1.9 版，遵循 ...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已结题（查看结题原因） 8月26日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
修改了问题 8月26日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 8月26日

JavaScript

问题

代码

index.html

files

chakan.html

index.css

index.js

jiaru.html

shixi.html

start.html

tichu.html

zhuangzheng.html

1条回答 默认 最新

问题事件

1条回答默认最新