如何自定义界面并将其保存以便可以再次访问？答案

【问题标题】：How can I customize an interface and save it so it can be accessed again?如何自定义界面并将其保存以便可以再次访问？
【发布时间】：2020-08-07 10:02:40
【问题描述】：

我正在尝试使用 Javascript 拖放。我已经构建了一个简单的界面，可通过拖放功能进行编辑。

这里是我的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Drag&Drop</title>
</head>
<body>

    <div class="empty">
        <div class="item" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>


    <script src="js/main.js"></script>

</body>
</html>

这是我的 style.css

body {
    background: white;
}


.lists {
    display: flex;
    flex:1;
    width 100%;
    overflow-x:scroll;

}

.item {
    background-image: url('http://source.unsplash.com/random/150x150');
    position: relative;
    height: 150px;
    width: 150px;
    top: 5px;
    left: 5px;
    cursor: pointer;
}

.empty {
    display: inline-block;
    height: 160px;
    width: 160px;
    margin: 5px;
    border: 3px blue;
    background-color: lightgray;
}

.hold {
    border: solid lightgray 4px;
}

.hovered {
    background: darkgray;
    border-style: dashed;
}

.invisible {
    display: none;
}

这里是我的 main.js：

const item = document.querySelector('.item');
const empties = document.querySelectorAll('.empty');

//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);

//Loop through empties
for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}

//Drag Functions
function dragStart() {
    console.log('Start');
    this.className += ' hold';
    setTimeout(()=> this.className = 'invisible', 0); 

}

function dragEnd() {
    console.log('End');
    this.className = 'item'; 

}

function dragOver(e) {  
    console.log('Over');
    e.preventDefault();

}

function dragEnter(e) {
    console.log('Enter');
    e.preventDefault();
    this.className += ' hovered';

}

function dragLeave() {
    console.log('Leave');
    this.className = 'empty';

}


function dragDrop() {
    console.log('Drop');
    this.className = 'empty';
    this.append(item)

}

好的。假设我是一个用户，将图片从第一个框移到了第四个框。下次登录时，我希望看到第四个框上的图片。

问题是：

如何保存新用户的布局？
当我再次打开该页面时如何调用它？

我对“后端”部分不感兴趣。我只是想了解如何从使用 Javascript 构建的自定义布局中提取信息以及如何在新页面上重建它。

非常感谢！

【问题讨论】：

标签： javascript html user-interface layout interface

【解决方案1】：

您可以做的是将索引保存在本地存储中的“空”类元素列表中。查看新的 JS 代码：

const empties = document.querySelectorAll('.empty');
let storage = JSON.parse(localStorage.getItem("elementLocation")).location
let storeData = {location: storage}

if (storage !== null) {
  let array = document.getElementsByClassName("empty");
  array[0].innerHTML = "";
  array[storage].innerHTML = '<div class="item" draggable="true">'
  alert(storage)
}
const item = document.querySelector('.item');
//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);

//Loop through empties
for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}


//Drag Functions
function dragStart() {
    this.className += ' hold';
    setTimeout(()=> this.className = 'invisible', 0); 

}

function dragEnd() {
    this.className = 'item'; 

}

function dragOver(e) {  
    e.preventDefault();

}

function dragEnter(e) {
    e.preventDefault();
    this.className += ' hovered';

}

function dragLeave() {
    this.className = 'empty';

}


function dragDrop() {
    this.className = 'empty';
    this.append(item);

    let parentArray = document.getElementsByClassName("empty");
    storeData.location = [].indexOf.call(parentArray, this);
    localStorage.removeItem('elementLocation');
    localStorage.setItem('elementLocation', JSON.stringify(storeData));
alert(JSON.parse(localStorage.getItem("elementLocation")).location);
}

这是 JSFiddle：https://codepen.io/mero789/pen/eYpvYVY

【讨论】：

您好 Ameer，感谢您的回复。使用此脚本，拖放不再起作用...：S ...它给了我以下错误：“未捕获的 TypeError：无法读取 null 的属性 'location'”
我会看看并修复它:)
谢谢...你能向我解释一下不同的行在做什么吗？特别是“让”功能。
Let 是定义变量的另一种方式，但是它可以改变，不像const。拖放也是固定的，我忘记在重置之前清除本地存储并且我没有设置元素的innerHTML属性
谢谢阿米尔！上面的代码还没有工作，但我设法修复它！请参阅下面的回复

【解决方案2】：

感谢 Ameer 输入，这是新的 main.js

const empties = document.querySelectorAll('.empty');
let storage = JSON.parse(localStorage.getItem("elementLocation"))
let storeData = {location: storage}

if (storage == null) {
    console.log("Storage Non Existing")

}
else { 
    console.log("Storage Existing")
    console.log(storage.location)
    let array = document.getElementsByClassName("empty");
    array[0].innerHTML = "";
    array[storage.location].innerHTML = '<div class="item" draggable="true">'
    alert(storage.location)    
}


const item = document.querySelector('.item');
//Item Listeners
item.addEventListener('dragstart',dragStart);
item.addEventListener('dragend',dragEnd);

//Loop through empties
for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}


//Drag Functions
function dragStart() {
    this.className += ' hold';
    setTimeout(()=> this.className = 'invisible', 0); 

}

function dragEnd() {
    this.className = 'item'; 

}

function dragOver(e) {  
    e.preventDefault();

}

function dragEnter(e) {
    e.preventDefault();
    this.className += ' hovered';

}

function dragLeave() {
    this.className = 'empty';

}


function dragDrop() {
    this.className = 'empty';
    this.append(item);

    let parentArray = document.getElementsByClassName("empty");
    storeData.location = [].indexOf.call(parentArray, this);
    localStorage.removeItem('elementLocation');
    localStorage.setItem('elementLocation', JSON.stringify(storeData));
    alert(JSON.parse(localStorage.getItem("elementLocation")).location);
}

【讨论】：