javascript - 如何将颜色框保存到本地存储中?
问题描述
我想在提交时将这些颜色 div 框保存到本地存储(输入值将作为背景颜色添加到 div 框)提前谢谢!
const
container = document.querySelector('.save-boxes .container'),
myForm = document.getElementById('myForm');
myForm.addEventListener('submit', addBox);
// Adding div element
function addBox(e) {
e.preventDefault();
let inputVal = input.value; // value
if(!inputVal) return;
let box = document.createElement('div');
box.className = 'hex-bg';
box.style.backgroundColor = input.value;
// hex-text
let hexText = document.createElement('div');
hexText.classList.add('hex-text');
hexText.textContent = input.value;
box.appendChild(hexText); // append input text on div
container.appendChild(box); // apppend 'hex-bg' div
box.addEventListener('click', remove);
this.reset();
}
// removing element on click
function remove() {
let parent = this.parentElement;
parent.removeChild(this);
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.hex-bg {
align-items: center;
border: 1px solid #ccc;
display: flex;
height: 200px;
justify-content: center;
width: 200px;
}
<form id="myForm">
<input id='input' type="text" placeholder="#821ab9" autofocus autocomplete="off" maxlength="7">
<button>add</button>
</form>
<!-- color boxes added from javascript -->
<div class="save-boxes">
<div class="container">
<!-- the sample div will be added..
<div class="hex-bg" style="background-color: #fc06cc;">
<div class="hex-text">#fc06cc</div>
</div>
-->
</div>
</div>
它是如何工作的示例:
解决方案
您可以将背景颜色十六进制代码保存在本地存储中,并且在重新访问时,您可以读取本地存储并重新绘制 div 框。
有关本地存储的更多信息,请单击此处
推荐阅读
- excel - 宏填充范围内的空白单元格
- c++ - 为什么构造函数中的dynamic_cast(this)不起作用以及如何使其起作用?
- sql-server - 在 sqlps 中使用变量 - SQL PowerShell
- ios - AsyncStorage 参考崩溃反应 iOS 上的本机应用程序
- swift - 通过 swift 执行 system_profiler
- c# - “System.Data.OleDb.OleDbException:'INSERT INTO 语句中的语法错误。'”
- javascript - 如何使对象方法成为 IIFE?
- python - 在样式html标签Django的背景属性中将模型变量传递给url()
- apache-kafka - KafkaConsumer 恢复分区不能继续接收未提交的消息
- spring - spring boot 中常用代码在哪里写