javascript 在这种情况下如何存储在LocalStorage中？

sirbozc5  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(114)

简单地说，我希望在创建新矩形或通过拖放添加图像时，网站可以保存。我在这方面相对缺乏经验，我看过的youtube视频也没有帮助我。在这里使用JSON文件有意义吗？或者只在浏览器中保存就足够了？
HTML：

<!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>Cop Or Drop</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/miniLogo.svg">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
    <header>
        <div class="justify-content-space-between navbar navigation">
                <div class="placeholder ms-5">
                    <p>Log-In</p>
                </div>
                <div class="navbar-brand">
                    <img src="img/navLogo.svg" width="150px" alt="">
                </div>
                <div class="login me-5">
                    <button class="open-button">Log-In</button>
                </div>
            </div>

        </div>
    </header>
    <div class="container">
    <div id="login-field" class="login-field">
        <button class="close-button"><i class="fa-solid fa-xmark"></i></button>
        <form class="form" id="login">
            <h1 class="form__title">Log-In</h1>
            <div id="errormsg" class="form__message form__message_error">Incorrect Password!</div>
            <div class="form__input-group">
                <input id="email" type="text" class="form__input" autofocus placeholder="E-Mail">
            </div>
            <div class="form__input-group">
                <input id="password" type="text" class="form__input" autofocus placeholder="Password">
                <div class="form__input-error-message"></div>
            </div>
            <button id="submit-button" class="form__button" type="submit">Continue</button>
        </form>
</div>
</div>
<button id="myButton"><i class="fa-solid fa-plus"></i></button>
<script src="script.js"></script>
    <script src="https://kit.fontawesome.com/ca61e08eab.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS：

h1{
    color: white !important;
    font-size: 50px;
    }
    
    .login button{
    background-color: transparent;
    border: none;
    color: white;
    font-size: 15px;
    }
    .navigation{
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    }
    
    .placeholder{
    font-size: 15px !important;
    visibility: hidden !important;
    }
    
    body{
    background-image: url(img/background.svg) !important;
    background-attachment: fixed;
    background-size: cover;
    --color-primary: #009579;
    --color-primary-dark: #007f67;
    --color-secondary: #252c6a;
    --color-error: #cc3333;
    --color-success: #4bb544;
    }
    
    .login-field{
    text-align: center;
    height: 400px;
    max-width: 400px;
    width: 400px;
    margin: 1rem;
    padding: 2rem;
    border-radius: 20px;
    position: absolute;
    transform: translateY(50%);
    display: none;
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
    z-index: 5;
    }
    
    .close-button{
    position: absolute;
    background-color: transparent;
    outline: none;
    border: none;
    color: white;
    font-size: 30px;
    right:3%;
    top: 3%;
    }
    
    .close-button:active{
    color: var(--color-error);
    transform: scale(0.90);
    }
    
    .container{
    position: relative;
    justify-content: center;
    display: flex;
    }
    
    .form__input-group{
    margin-bottom: 1rem;
    }
    
    .form__input{
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 0.75rem;
    border-radius: 5px;
    outline: none;
    border: 4px solid #eeeeee;
    transition: border-color 0.2s, background 0.2s;
    background-color: #eeeeee;
    }
    
    .form__input:focus{
    border-color: var(--color-primary);
    background: #ffffff;
    }
    
    .form__button{
    width: 100%;
    padding: 1rem 2rem;
    margin-top: 1.5rem;
    border-radius: 5px;
    background-color: var(--color-primary);
    color: white;
    outline: none;
    border: none;
    transition: background 0.2s;
    }
    
    .form__button:hover{
    background-color: var(--color-primary-dark);
    }
    
    .form__message{
    text-align: center;
    margin-bottom: 1rem;
    }
    
    .form__message_error{
    color: var(--color-error);
    font-family:monospace;
    visibility: hidden;
    }
    
    .form__message_success {
    color: var(--color-success);
    }
        
    .form__input-error-message,
    .form__input--error {
    color: var(--color-error);
    border-color: var(--color-error);
    }
        
    .form__button:active {
    transform: scale(0.98);
    }
        
    #myButton {
    position: absolute;
    bottom: 3%;
    right: 3%;
    outline: none;
    border: none;
    font-size: 30px;
    border-radius: 500px;
    width: 100px;
    height: 100px;
    }

    .hover{
        color: rgb(255, 255, 255) !important;
        border: 1px dashed #fff !important;
    }

    .valid{
        color: #fff;
        background-color: #4bb544;
        border: 1px solid green;
    }

    .invalid{
        color: #fff;
        background-color: red;
        border: 1px solid red;
    }
        
    .inactive,
    .active {
    width: 60% !important;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
    margin: 0 auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
    height: 150px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: height ease-in-out 0.5s, width ease-in-out 0.5s, border-radius ease-in-out 0.5s;
    }

    
        
    .active {
    width: 70% !important;
    border-radius: 40px;
    height: 400px !important;
    }

    .closeRectangleInactive,
    .closeRectangleActive {
        color: white;
        position: relative;
        align-self: flex-start;
        margin-left: 10px;
        font-size: 30px;
        transition: margin-left ease-in-out 0.5s, margin-top ease-in-out 0.5s, font-size ease-in-out 0.5s;
    }
    .closeRectangleActive:active{
        color: var(--color-error);
        transform: scale(0.90);
        }
    .closeRectangleInactive:active{
            color: var(--color-error);
            transform: scale(0.90);
            }
    .closeRectangleActive{
        margin-left: 15px;
        margin-top: 0px;
        font-size:50px;
    }
    .field{
        width: 120px;
        height: 120px;
        top: 40px;
        left: 340px;
        border: 1px dashed white;
        margin-right: 3%;
        margin-top: 1.5%;
        margin-bottom: 1.5%;
        transition: width ease-in-out 0.5s, height ease-in-out 0.5s;
        
    }
    .activeField{
        width: 240px;
        height: 240px;
        top: 40px;
        left: 340px;
        border: 1px dashed white;
        margin-right: 3%;
        margin-top: 1.5%;
        margin-bottom: 1.5%;
        transition: width ease-in-out 0.5s, height ease-in-out 0.5s;
    }

        
    ::-webkit-scrollbar {
    width: 10px;
    }
        
    ::-webkit-scrollbar-thumb {
    background-color: #888;
    }

联森：

function init() {
let loginButton = document.querySelector(".open-button");
let closeButton = document.querySelector(".close-button");
let container = document.querySelector(".login-field");
loginButton.addEventListener("click", openLogin);
closeButton.addEventListener("click", closeLogin);
let button = document.getElementById("myButton");
button.addEventListener("click", createRectangle);


function openLogin() {
  container.style.display = "inline";
}
function closeLogin() {
  container.style.display = "none";
}
}

var activeRectangle;
var activeField;
var rectangleId = 0;
var fieldId = 0;

// create a new rectangle
function createRectangle() {
  var rectangle = document.createElement("div");
  rectangle.className = "inactive";
  rectangle.id = `rectangle-${rectangleId}`;
  console.log(rectangle.id)
  var field = document.createElement("div");
  field.className = "field";
  field.id = `field-${fieldId}`;
  
  rectangle.addEventListener("click", function() {
    if (activeRectangle) {
      activeRectangle.classList.remove("active");
      activeRectangle.closeRectangle.classList.remove("closeRectangleActive");
      activeRectangle.closeRectangle.classList.add("closeRectangleInactive");
      activeRectangle.classList.add("inactive");
      if (activeRectangle.classList.contains("inactive")) {
        activeField.classList.add("field");
        activeField.classList.remove("activeField");
      }
    }

    rectangle.classList.remove("inactive");
    rectangle.closeRectangle.classList.remove("closeRectangleInactive");
    rectangle.classList.add("active");
    rectangle.closeRectangle.classList.add("closeRectangleActive");
    if (!rectangle.classList.contains("inactive")) {
      field.classList.add("activeField");
      field.classList.remove("field");
      activeField = field;
    }
    
    activeRectangle = rectangle;

  });
  console.log(rectangle.className);
  document.body.appendChild(rectangle);

  
  var icon = '<i class="fa-solid fa-xmark"></i>';
  rectangle.closeRectangle = document.createElement("div");
  rectangle.closeRectangle.className = "closeRectangleInactive";
  rectangle.closeRectangle.id = `close-button-${rectangleId}`;
  console.log(rectangle.id)
  rectangle.closeRectangle.innerHTML = icon;
    rectangle.closeRectangle.addEventListener("click", function() {
      rectangle.remove();
        console.log(rectangle.id)
      
      });

  rectangleId++;
  fieldId++;
  rectangle.appendChild(rectangle.closeRectangle);


  rectangle.appendChild(field);
  document.body.appendChild(rectangle);

// Add event listeners to change the border color when a file is dragged over or out of the field
field.addEventListener("dragover", event => {
  event.preventDefault();
  field.style.border = "2px solid rgba(0, 0, 0, 0.5)";
  field.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
});
field.addEventListener("dragleave", event => {
  event.preventDefault();
  field.style.border = "1px solid black";
});


// Add event listener to open file explorer when field is clicked
field.addEventListener("click", event => {
  const input = document.createElement("input");
  input.type = "file";
  input.addEventListener("change", event => {
    const file = input.files[0];
    const fileType = file.type.split("/")[1];
    if (fileType === "png" || fileType === "jpg" || fileType === "jpeg") {
        // Create an image element
        const img = new Image();
        // Set the image source to the file data
        img.src = URL.createObjectURL(file);
        // Set the width and height of the image to match the field
        img.style.width = "100%";
        img.style.height = "100%";
        // Remove any existing image from the field
        while (field.firstChild) {
          field.removeChild(field.firstChild);
        }
        // Append the new image to the field
        field.appendChild(img);
        field.style.border = "1px solid green";
        field.style.backgroundColor = "green";
        console.log("File uploaded");
    } else {
        field.style.border = "1px solid red";
        field.style.backgroundColor = "red";
        console.log("Wrong file format");
    }
  });
  input.click();
});

}

init();
JavaScript

1条答案

按热度按时间
km0tfn4u

km0tfn4u1#

要在LocalStorage中存储数据，可以使用localStorage.setItem（）方法：

// create a new rectangle
function createRectangle() {
  // your existing code ...

  rectangleId++;
  fieldId++;
  rectangle.appendChild(rectangle.closeRectangle);
  rectangle.appendChild(field);
  document.body.appendChild(rectangle);

  // Save the rectangle in Local Storage
  saveRectangle(rectangle);

  // Add event listeners to change the border color when a file is dragged over or out of the field
  // ...
}

// Save the rectangle in LocalStorage
function saveRectangle(rectangle) {
  // Get the rectangles from LocalStorage (if any)
  var rectangles = JSON.parse(localStorage.getItem("rectangles")) || [];
  
  // Add the new rectangle to the array
  rectangles.push(rectangle.id);

  // Save the updated array in LocalStorage
  localStorage.setItem("rectangles", JSON.stringify(rectangles));
}

在这个例子中，我们定义了一个新的函数saveRectangle，它接受一个矩形作为参数。在这个函数中，我们首先从LocalStorage获取任何现有的矩形，并将JSON数据解析到一个数组中（或者如果没有现有的矩形，则创建一个新的空数组）。然后我们将新矩形的ID添加到这个数组中，并将更新后的数组保存回LocalStorage。
请注意，当页面加载时，您还需要从LocalStorage加载矩形，并根据需要将它们添加到DOM。您可以通过将以下代码添加到init函数来完成此操作：

function init() {
  // your existing code ...

  // Load rectangles from LocalStorage and create them
  var rectangles = JSON.parse(localStorage.getItem("rectangles")) || [];
  rectangles.forEach(function(rectangleId) {
    var rectangle = document.getElementById(rectangleId);
    if (rectangle) {
      createRectangle(rectangle);
    }
  });
}

在这段代码中，我们首先从LocalStorage中获取矩形ID数组（或者如果没有现有的矩形，则创建一个新的空数组）。然后我们循环遍历数组中的每个ID，从DOM中获取相应的矩形元素，并以该元素作为参数调用createRectangle函数。这将创建矩形并将其添加到DOM中，就像它是由用户创建的一样。

赞(0）分享  回复(0）举报  2023-04-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com