मैं टेक्स्टरीज़ में जानकारी को सहेजने के लिए स्थानीय स्टोरेज का उपयोग करके जर्नलिंग ऐप बनाने की कोशिश कर रहा हूं। जब मैं सेव बटन दबाता हूं तो यह जानकारी को सही बॉक्स में सेव करता है लेकिन जब मैं पेज को फिर से लोड करता हूं तो सभी बॉक्स में टॉप बॉक्स से जानकारी होती है। मैं इस कोड को कैसे लिखूं ताकि जब मैं पृष्ठ को पुनः लोड करूं तो यह सभी जानकारी को सही बक्से में सहेजता है?

var output_morning=
document.querySelector('.morning');

var input_breakfast=
document.querySelector('.breakfast');

var output_afternoon=
document.querySelector('.afternoon');

var input_lunch=
document.querySelector('.lunch');

var save_button=
document.querySelector('.save-button');


save_button.addEventListener('click', updateJournal);

output_morning.textContent = localStorage.getItem('content');
input_breakfast.value = localStorage.getItem('content');
output_afternoon.textContent = localStorage.getItem('content');
input_lunch.value = localStorage.getItem('content');

function updateJournal(){
localStorage.setItem('content', input_breakfast.value, input_lunch.value);
output_morning.textContent=input_breakfast.value;

output_afternoon.textContent=input_lunch.value;
}
.morning {
	float: left;
	box-sizing: border-box;
	background: #f9f9f9;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	color: #202020;
}

.breakfast {
	float: left;
	box-sizing: border-box;
	margin-left: 2rem;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	border: 1px solid #505050;
	resize: none;
}
.afternoon {
	float: left;
	box-sizing: border-box;
	background: #ff7256;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	color: #202020;
}
.lunch {
	float: left;
	box-sizing: border-box;
	margin-left: 2rem;
	padding: .5rem;
	width: calc(50% - 1rem);
	height: 10rem;
	border: 1px solid #505050;
	resize: none;
}
<div class="morning"></div>
<textarea class="breakfast"></textarea>
<div class="afternoon"></div>
<textarea class="lunch"></textarea>
<button class="save-button">save</button>
2
nerdmom630 1 मार्च 2019, 06:55

1 उत्तर

सबसे बढ़िया उत्तर

setItem मेथड केवल दो पैरामीटर लेता है , कुंजी और मूल्य।

दो अलग-अलग कुंजी मान जोड़े को सहेजने के लिए आप दो बार setItem विधि को कॉल कर सकते हैं:

  localStorage.setItem('breakfast', input_breakfast.value);
  localStorage.setItem('lunch', input_lunch.value);

और सहेजे गए मानों को पुनर्प्राप्त करें जैसे:

output_morning.textContent = localStorage.getItem('breakfast');
input_breakfast.value = localStorage.getItem('breakfast');
output_afternoon.textContent = localStorage.getItem('lunch');
input_lunch.value = localStorage.getItem('lunch');

आपके कोड का एक अद्यतन डेमो

एक विकल्प के रूप में, आप एक JavaScript ऑब्जेक्ट को लोकलस्टोरेज में सहेज सकते हैं

3
Awad Maharoof 1 मार्च 2019, 04:15