In the following code, I am allowing users to edit text content, save and recall changes from own "local storage". So every editor's browser "remembers" their own editing, and each editor sees his changes only. I want to realise an idea of the anonymous wiki and import every user edits and display the last one in the final HTML page.
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML = "Готово";
}
function checkEdits() {
//find out if the user has previously saved edits
if (localStorage.userEdits !== null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
body {
display: block;
padding: 50px;
margin: 50px;
width: 90%;
font-family: 'Oranienbaum', serif;
font-size: 30px;
margin-right: 50px;
height: 90%
}
#edit {
background-color: white;
margin: 5px;
padding: 0px;
text-align: inherit;
font-size: 40px;
font-family: 'Oranienbaum', serif;
}
#button {
background-color: silver;
border: none;
top: 100px;
margin: 5px;
padding: 10px;
font-family: 'Oranienbaum', serif;
font-size: 20px;
}
#update {
background-color: white;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 20px;
}
hr {
display: block;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: 1px;
}
.footer {
background-color: inherit;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Indexmod Encyclopedia — anonymous real-time editing </title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Oranienbaum');
</style>
</head>
<body onload="checkEdits()">
Indexmod Россия
<hr>
<div id="edit" contenteditable="true">
Here is Indexmod Encyclopedia anonymous real-time editing sandbox area
</div>
<hr>
<input type="button" id=button value="Сохранить" onclick="saveEdits()" />
<div id="update">Редактируй текст и нажми сохранить до следующего раза</div>
<p class="footer" id="footer"><span><script src="footer.js"></script></span>
</p>
</body>
</html>
While you're going to set item on local storage, the method goes to:
localStorage.setItem('userEdits', userVersion);
And get item
localStorage.getItem('userEdits');
Hope it would be help, This works for me.
See the reference: http://www.w3schools.com/html/html5_webstorage.asp
Related
i have to make a chatapp for a course using mqtt (hivemq) with javascript in a webrowser (html css); when i open the file in my browser it works fine, i receive and can send and see others messages but i want my webapp to accessable to everyone .. i tried github pages .. it didnt work cuz it uses https connections and mine uses ws. i understand the problem. i know what the problem is. but is there any way i can fix it? like is there a way i can still use my hivemq chatapp online?
my javascript code looks like this btw:
// Create a client instance
//client = new Paho.MQTT.Client("test.mosquitto.org", 8080, client_id="", clean_session="true", userdata="none", protocol="MQTTv311", transport="tcp");
var client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "Keshav");
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// connect the client
client.connect({onSuccess:onConnect});
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log("onConnect");
client.subscribe("codettes2022");
//pick one!
message = new Paho.MQTT.Message("Keshav just hopped on! say hi!");
message2 = new Paho.MQTT.Message("Keshav just landed! say hello!");
message3 = new Paho.MQTT.Message("Keshav joined the party! welcome!");
message4 = new Paho.MQTT.Message("welcome keshav, we hope you brought boogie's");
message.destinationName = "codettes2022";
message2.destinationName = "codettes2022";
message3.destinationName = "codettes2022";
message4.destinationName = "codettes2022";
var values = [message,message2,message3,message4]
valueToUse = values[Math.floor(Math.random() * values.length)];
client.send(valueToUse); //here you send the message name .. message1,2,3,4
}
function sendMessageButton(msgtext){
if (msgtext!=''){
message = new Paho.MQTT.Message(msgtext);
message.destinationName = "codettes2022";
client.send(message);
console.log(message);
}
}
// OR listen to the Enter event on n input box
function sendMsg(ele) {
if(event.key === 'Enter') {
message = new Paho.MQTT.Message("Alien says: " + ele.value);
message.destinationName = "codettes2022";
client.send(message);
//alert(ele.value);
ele.value = ""; // reset the input after entering
console.log(message);
}
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
// called when a message arrives
function onMessageArrived(message) {
console.log("onMessageArrived:"+ message.payloadString);
// To do: if user is myself do different style or ignore the message and write directly to log
var name = "keshav"//change ur name here
var cor = '<h4 class="styletxt">' + '<h5 class="name">' + name + "</h5>" + message.payloadString + "</h4>" // "<h4>" + + "</h4>"
document.getElementById("chatlog").innerHTML += cor + "<br>"
}
html + css:
html:
<!DOCTYPE html>
<html lang="en">
<header>
<!--<div style="background-color:blue; width: 100%; height: 60px;">
<h1 style="padding-left: 25%; padding-right: 25%;">hi</h1>
</div>-->
</header>
<head>
<meta charset="UTF-8">
<title>bootcamp2022GANG</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script src="script2.js"></script>
</head>
<body>
<!--<div class="status" style="float: top; background-color: #474746; float: top; width: 25%; height: 60px;">
</div>-->
<div>
<div class="chat-bg">
<div class="status">
</div>
<h4 style="font-family: arial; text-align: center;">chats</h4>
<div class="codettesBootcamp2022">
<img class="bootcamp2022LOGO" src="bootcamplogo.jpg">
<h4 class="bootcamp2022name">Bootcamp2022</h4>
</div>
</div>
</div>
<aside>
<div class="chat-LOG">
<div class="person">
<h3 class="person-name">Bootcamp2022</h3>
</div>
<div class="text-inpt" style="width: 100%;">
<div id="chatlog" style="width: 100%; height: 650px; text-align: center;">
<h6 style="margin: 0; padding-top: 10px;">this chat isn't safe, so chances of message leaks are high. be
careful.</h6>
<div id="name">
</div>
</div>
<input class="inpt" type="text" id="chatInput">
<button class="sendButton"
onclick="sendMessageButton(getElementById('chatInput').value); getElementById('chatInput').value='';">
<img class="send-img" src="sendmessage-orig.png"></button>
</div>
</div>
</aside>
</body>
<!---->
<footer>
<!--<h2>mail me at [redacted]. the chance ill respond to ur mail is very low.</h2>-->
</footer>
</html>
css:
html{
background-color: gray;
}
.person{
border-radius: 20px;
float: top;
text-align: center;
background-color: #6a6b69;
width: 100%;
height: 60px;
}
.chat-bg{
border-radius: 20px;
float: left;
float: bottom;
background-color: #a9a9a9;
width:25%;
height: 775px;
}
.status{
float: top;
background-color: #474746;
float: top;
width: 100%;
height: 60px;
}
.sendButton{
border-radius: 25%;
background-color: #326da8;
outline: none; border: none;
height:30px;
width:30px;
}
.send-img{
float: center;
height:20px;
width:100%;
max-width: 20px;
padding-top: 25%;
}
.status{
border-radius: 20px;
}
.input-message .input{
border-radius: 20px;
background-color: blue;
}
.codettesBootcamp2022{
border-radius: 35px;
overflow: hidden;
float: top;
background-color: #4b2157;
width: 100%;
height: 60px;
max-width: 350px;
margin:0 auto;
}
.bootcamp2022LOGO{
max-width: 50px;
border-radius: 50%;
padding-top: 5px;
padding-left: 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: gray;
opacity: 1; /* Firefox */
}
.styletxt{
color: white;
}
.codettesBootcamp2022 .a{ /* Style the links inside the navigation bar */
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.codettesBootcamp2022:hover{ /* Change the color of links on hover */
background-color: #ddd;
color: black;
/*cursor: pointer;*/ /*dont give the user a feeling that it will do something when it doesnt.*/
}
.bootcamp2022name{
float: right;
padding-right: 30%;
display: inline-block;
font-family: 'Trebuchet MS', sans-serif;
}
.chat-LOG{
float: right;
font-color : white;
background-color: #dbdbdb;
width: 73%;
height: 775px;
border-radius: 20px;
font-family: 'Trebuchet MS', sans-serif;
}
.person-name{
display: inline-block;
font-family: 'Trebuchet MS', sans-serif;
}
.inpt{
background-color: #63605f;
outline: none;
border: none;
border-radius: 6px;
height: 35px;
width: 90%;
margin-left:4.3%;
}
#media only screen and (min-width: 768px) {
/*later*/
}
i use the js in a browser. if you have any suggestions for a better connection using nodejs, also great, ty
I'm working on my first ever JavaScript project (a palindrome checker) and I'm kind of getting stuck. I've learned about localStorage() but I can't seem to implement it in my own project. It'd be awesome if someone could point me in the right direction, or write pseudo code as to what I should do to get it to work. I really want to solve it myself, but a little help is much needed here. Thanks :). My JavaScript code (and HTML and CSS for reference:
Edit: I want to show the results (each on a separate line) on the screen using localStorage() and use it again to enable the user to delete the results when clicking on the button.
const checkBtn = document.getElementById("check-word");
const clearBtn = document.getElementById("clear-history");
const outputField = document.getElementById("word-checked");
let array = [];
checkBtn.addEventListener("click", () => {
const str = document.getElementById("input").value;
array = [...array, str];
console.log(array);
palindrome(str);
renderResult();
function palindrome(str) {
const lettersOnly = str.toLowerCase().match(/[a-z0-9]/g);
return lettersOnly.join("") === lettersOnly.reverse().join("");
}
renderResult();
function renderResult() {
if (palindrome(str) === true) {
outputMessage = `︎✔︎ '${str}' is a palindrome!`
} else {
outputMessage = `𐄂 '${str}' is not a palindrome!`
}
outputField.textContent = outputMessage;
}
document.getElementById("input").value = ""; // clear input field after clicking on checkBtn
})
// clearBtn.addEventListener("click", () => {
// localStorage.clear();
// array = [];
// // render again!
// })
* {
background-color: #121212;
font-size: 16px;
margin: 0;
padding: 0;
}
h1 {
font-family: "VT323", monospace;
font-size: 5rem;
color: #CE1212;
text-align: center;
margin-top: 50px;
}
.container {
font-family: "Nanum Gothic Coding", monospace;
color: white;
width: 75%;
height: 62.5vh;
margin: 25px auto 25px auto;
/* border: 2.5px solid; */
border-color: white;
padding: 15px;
}
.input {
margin-left: 25px;
}
.input-field {
margin-left: 25px;
margin-top: 12.5px;
padding: 7.5px;
font-family: "Nanum Gothic Coding", monospace;
color: white;
border: 1px solid;
}
.input-field:focus::placeholder {
color: transparent;
}
.check-word, .clear-history {
padding: 7.5px;
font-family: "Nanum Gothic Coding", monospace;
color: white;
border: 1px solid;
border-color: white;
cursor: pointer;
}
.check-word:hover, .clear-history:hover {
color: #CE1212;
}
.child-1 {
margin-top: 50px;
margin-left: 25px;
/* border: 1px solid; */
padding: 15px;
}
#word-checked {
margin-top: 15px;
}
.footer {
font-family: "Nanum Gothic coding", monospace;
color: white;
text-align: center;
margin-bottom: 25px;
}
a:link, a:visited {
color: white;
text-decoration: none;
}
a:hover, a:active {
color: #CE1212;
text-decoration: underline;
}
/*
top, right, bottom, left
*/
<!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>Palindrome Checker</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=VT323&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<h1>🌮 Palindrome Checker 🐱</h1>
<div class="container">
<label for="input" class="input">Type a word or phrase</label>
<br>
<input type="text" name="input" class="input-field" id="input" placeholder="Type something...">
<button type="button" class="check-word" id="check-word">Check word</button>
<button type="button" class="clear-history" id="clear-history">Clear history</button>
<div class="child-1">
<p id="word-checked">Results will be shown here!</p>
</div>
</div>
</main>
<footer class="footer">
<p>Built by Yin Chu</p>
</footer>
<script src="index.js"></script>
</body>
</html>
It's really easy. (At least much easier than cookies)
localStorage.setItem('key', 'value'); // to store data
var myData = localStorage.getItem('key') // to get data
localStorage.removeItem('key') // to remove one data
localStorage.clear() // to remove all data
Replace key and value with the data key and the data to store respectively.
Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
Hey earthlings,
i started learning HTML and CSS. Currently I'm dealing with style classes. I created a simple example. What I want to reach is, that the titlebar changes the font color, the font-size and the background color if button1 is clicked.
Initially the titlebar has appended the titlebar-class, after button1 is clicked the darktitle-class should also be added and overwrite certain attributes.
However in this configuration it doesn't happen. If you change the order of the .darktitle and .titlebar class in css file it works. I wonder why.
The CSS Styles should be on the same priority level, so I would expect that the laterly assigned would overwrite the attributes.
TNX
you can use !important to override styles like this
.darktitle {
color: #000000!important;
background: grey!important;
font-size: 25px!important;
}
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
The order of your css selectors matter when both selectors are being applied to the same element. Move the ".darktitle" below the ".titlebar" as in this example. Then when applied by the button the ".darktitle" sstyles will override those same properties in ".titlebar".
Please take a look at this link about CSS specificity, there you will read about your question and why not to use !important declaration.
Specificity at MDN
I am new to web development.
I am try to add a list item to a unorded list.
using javascript
html
<!DOCTYPE html>
<html>
<head>
<title>Item Add Test</title>
<script src="item.js"></script>
<link rel="stylesheet" type="text/css" href="item.css">
</head>
<body>
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>
<ul id="menu">
<li>ABC</li>
<li>BLA</li>
</ul>
</body>
</html>
css item.css
body {
font-family: monospace;
text-align: center;
font-size: 1.5em;
}
input {
text-align: center;
width: 300px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
padding-left: 10px;
font-size: 1.2em;
font-weight: bold;
}
#submit {
font-size: 1em;
}
javascript item.js
function myFunction1() {
var name = document.getElementById("initem").value;
var node = document.createElement("LI");
var textnode = document.createTextNode(name);
node.appendChild(textnode);
document.getElementById("menu").appendChild(node);
}
I successfully add items to the list.
But when I refresh the page all items are gone.
How can I save the html file or update the html file after adding the items,so that if I refresh the page list items remain there.
You can save the text of <li> elements in the local storage and retrieve on load event of the body.
The snippet won't work for security reasons but I tried on Sublime Text and it's fine.
var li_texts = [];
function myFunction1() {
var name = document.getElementById("initem").value;
var node = document.createElement("LI");
var text = 'Test';
node.innerHTML = text;
document.getElementById("menu").appendChild(node);
li_texts.push(text);
localStorage.setItem("li_texts", JSON.stringify(li_texts));
}
function loadList(){
if (localStorage.getItem("li_texts") !== null) {
var stored_names = JSON.parse(localStorage.getItem("li_texts"));
for(i=0; i<stored_names.length; i++){
var node = document.createElement("LI");
node.innerHTML = stored_names[i];
document.getElementById("menu").appendChild(node);
}
}
else{
return;
}
}
body {
font-family: monospace;
text-align: center;
font-size: 1.5em;
}
input {
text-align: center;
width: 300px;
height: 30px;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
padding-left: 10px;
font-size: 1.2em;
font-weight: bold;
}
#submit {
font-size: 1em;
}
<!DOCTYPE html>
<html>
<head>
<title>Item Add Test</title>
<script src="item.js"></script>
<link rel="stylesheet" type="text/css" href="item.css">
</head>
<body onload="loadList()">
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>
<ul id="menu">
<li>ABC</li>
<li>BLA</li>
</ul>
</body>
</html>