прошу помочь с LocalStorage никак не могу разобраться с плюсами, то они прибавляются, то они вообще исчезают, а мне нужен всего один

Question

js

let txt;
let div;
let kil;
let rer;
let pop;
let rerir;
let rerer;
let clas = 0;
let rtg;
let r;
let io = document.querySelector('#production_conteiner');
// io.innerHTML = localStorage.getItem('key');
function myFunction(){
  let x = document.getElementById("myFile");
  if ('files' in x) {
    if (x.files.length == 0) {
      txt = "а где файл?";
    } else {
      for (let i = 0; i < x.files.length; i++) {
        let file = x.files[i];
        if ('name' in file) {
          txt = file.name;
          r = document.getElementsByClassName('img_popap')[0].style.backgroundImage = "url('" + 'товар/' + txt + "')";
          document.getElementsByClassName('img_0')[0].src = 'товар/' + txt;
        }
      }
    }
  } 
}
let awa = document.querySelectorAll('#production_conteiner > div');
document.addEventListener('DOMContentLoaded', function () {
  const slider = new ChiefSlider('.slider', {
    loop: true
  });
});
function dayn() {
  io.innerHTML += '<div class="imd_' + clas + '" onclick="addNum(this)"><a href="#popap_2" class="wew"><p class="p" id="p' + clas + '"></p><figure id="vyu"><img src="" class="myImg' + clas + '"><figcaption class="figcaption_1" id="figcaption_1' + clas + '"></figcaption><figcaption class="figcaption_2" id="figcaption_2' + clas + '"></figcaption></figure></a></div>';
  rtg = "imd_" + clas;
  div = document.getElementsByClassName(rtg);

//   let ghj = document.querySelector('.body');
// function fuf() {
//   ghj.innerHTML += '<main class="gfd">mv</main>';
//   localStorage.setItem('key', document.querySelector('.body').innerHTML);
// }

  let popip = document.querySelector(".textarea").value;
  rerir = document.querySelector("#p" + clas).innerHTML = popip;
  pop = document.getElementById("popop").value;
  rer = document.querySelector("#figcaption_1" + clas).innerHTML = pop;
  let popop = document.getElementById("pop").value;
  rerer = document.querySelector("#figcaption_2" + clas).innerHTML = popop;
  document.querySelector(".myImg" + clas).src = 'товар/' + txt;
  clas++;
  localStorage.setItem('key', io.innerHTML);
}
let elements = document.querySelectorAll("#production_conteiner div");
function addNum(el) {
  let dever = el.className;
  let weber = document.getElementsByClassName(dever)[0];
  let rerir_1 = weber.querySelector(".p").innerHTML;
  document.querySelector(".textarea_1").innerHTML = rerir_1;
  let rer_1 = weber.querySelector(".figcaption_1").innerHTML;
  document.querySelector(".popop_1").innerHTML = rer_1;
  let rerer_1 = weber.querySelector(".figcaption_2").innerHTML;
  document.getElementById("pop_1").value = rerer_1;
  document.querySelector(".myImg").src = 'товар/' + txt;
};
io.innerHTML = localStorage.getItem('key');
for (let i = 0; i<1; i++) {
  io.innerHTML += '<figure class="fig"><a href="#popap_1"><img src="img/плюс.png" type="button" href="#popap_1"></a></figure>';
}
// localStorage.clear()

css

body, html {
    height: 100%;
    width: auto;
    margin: 0px;
}
ul {
    list-style: none;
}
.li_header {
    text-align: center;
    margin-top: 1vw;
    position: relative;
    right: 2.8vw;
}
body {
    background-image: url(img/фон.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
}
.li_header li {
    display: inline-block;
    color: #ffffff;
    font-size: 2.5vw;
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
}
.li_1 {
    margin-right: 5.2%;
    position: relative;
    bottom: 2.2vw;
}
.li_2 {
    position: relative;
    bottom: 2.2vw;
}
.li_3 {
    margin-right: 5.2%;
    position: relative;
    bottom: 2.2vw;
}
.li_4 {
    position: relative;
    bottom: 2.2vw;
}
.li_6 {
    margin-left: 5.6%;
    margin-right: 5.6%;
    margin-top: 0%;
}
.icon {
    width: 10.2vw;
    height: auto;
}
header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #885128;
    height: 12.2vw;
    width: 100%;
    z-index: 1;
}
footer {
    width: 100%;
    height: 32.9vw;
    background-color: #000000;
}
.text_p_footer {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 1.9vw;
    margin-left: 12.6%;
    position: relative;
    bottom: -7.7vw;
}
.li_p_footer li img {
    /* display: flexbox;
    flex-direction: column; */
    width: 19%;
    height: auto;
    /* float: left; */
}
.li_p_footer li a p {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 2.3vw;
    float: right;
    position: relative;
    left: -30%;
}
.li_p_footer li {
    margin-left: 50%;
    display: flex;
    flex-direction: row;
}
.li_p_footer {
    margin-top: -9.6vw;
}
.li_p_footer {
    position: relative;
    /* bottom: 8.1vw; */
}
.img_footer {
    width: 12.1%;
    height: auto;
    margin-left: 16.5%;
    position: relative;
    bottom: -25%;
}
.geo {
    width: 4%;
    height: auto;
    float: left;
    margin-top: 12px;
}
a:link {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
}
a:active {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
}
footer ul {
    margin-left: 5.1%;
    margin-bottom: 2.56vw;
}
#production_conteiner {
    color: #000000;
    margin-bottom: 7.4vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
figure {
    width: auto;
    background-color: #EDF1EF;
    width: 310px;
    height: 344px;
    margin-top: 4.4vw;
}
figure img {
    height: 278px;
    width: 310px;
}
figcaption {
    color: #000;
}
.figcaption_2 {
    font-size: 24px;
    float: right;
    margin-top: 13.5px;
    margin-right: 9px;
}
.figcaption_1 {
    float: left;
    font-size: 18px;
    width: 50%;
    word-wrap: break-word;
    margin-left: 15px;
    margin-top: 10px;
}
#popap_1, #popap_2 {
    position: fixed;
    background-color: rgb(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    z-index: 3;
}
#popap_2:target, #popap_1:target {
    opacity: 1;
    visibility: visible;
}
.popap_body {
    width: 80.8%;
    height: 50vw;
    background-color: #501504;
    z-index: 532;
}
.textarea, .textarea_1 {
    width: 86%;
    height: 16.3vw;
    margin-top: 2%;
    margin-left: 6.5%;
    border: 0px;
    background-color: #824C20;
    font-size: 1.5vw;
    padding: 1vw;
}
.input_rubli {
    height: 4.5vw;
    width: 46%;
    margin-top: 2%;
    border: 0px;
    background-color: #824C20;
    text-align: center;
    font-size: 2.3vw;
}
.popap_header {
    height: 9.2%;
    width: 100%;
    background-color: #824C20;
}
#cloze_1 {
    height: auto;
    width: 3.4%;
    float: right;
    margin-top: 0.9%;
    margin-right: 6.5%;
}
#korzina {
    height: auto;
    width: 4%;
    float: left;
    margin-top: 0.9%;
    margin-left: 6.5%;
}
.name_popap, .popop_1 {
    width: 83%;
    height: 7.3vw;
    border: 0px;
    background-color: #824C20;
    font-size: 1.5vw;
    padding: 1vw;
    margin-top: -2.3vh;
}
.ul_input {
    float: right;
    width: 50%;
    height: 20.5vw;
    margin-bottom: 2vw;
}
#cloze_2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.image_popap {
    width: 43.5%;
    height: 20.5vw;
    /* margin-top: 2vw; */
    margin-left: 6.5%;
    float: left;
    background-color: #824C20;
}
#myFile {
    text-align: center;
}
.img_popap {
    margin: 0% 18%;
    width: 64%;
    height: 100%;
    background-color: #ffffff;
}
.fig {
    background-color: transparent;
}
.fig img {
    width: 190px;
    height: 190px;
    margin: 77px 60px;
}
.popap_mini_body {
    margin-top: 2vw;
}
#mySearch {
    width: 38.3vw;
    height: 7.4vw;
    background-color:#824C20;
}
.burger {
    padding: 1vw;
    width: 38.3vw;
    height: 7.4vw;
    background-color:#824C20;
    font-size: 1.6vw;
}
.rew {
    width: 30.4vw;
    height: 7.2vw;
    padding-left: 2vw;
    font-size: 2.6vw;
    background-color:#824C20;
    outline: none;
    box-sizing: border-box;
    border: 0px;
}
.imw_1 {
    height: 6.5vw;
    margin: 0.35vw;
    width: auto;
    float: right;
}
.ryt {
    margin-right: 7vw;
    margin-left: 7.4vw;
    margin-top: 17.7vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: -1;
}
.p {
    position: absolute;
    font-size: 0px;
    z-index: -4;
}

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style_2.css">
    <link rel="stylesheet" href="chief-slider.min.css">
    <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=Roboto:wght@500;700;300&display=swap" rel="stylesheet">
</head>
<body onload="myFunction()">
    <div class="div">
        <header id="header">
            <ul class="li_header">
                <li class="li_1"><a href="index.html">Главная</a></li>
                <li class="li_2"><a href="production.html">Продукция</a></li>
                <li class="li_6"><img src="img/иконка.png" class="icon"></li>
                <li class="li_3"><a href="basket.html">Корзина</a></li>
                <li class="li_4"><a href="help.html">Помощь</a></li>
            </ul>
        </header>
        <main class="content">
            <div class="ryt">
                <div id="mySearch"><input type="text" class="rew" id="input"><img class="imw_1" src="img/поиск.png"></div>
                <select class="burger">
                    <option>Полуфабрикаты собственного производства</option>
                    <option>Полуфабрикаты других производителей</option>
                    <option>Колбасы и деликатесы</option>
                    <option>Овощи, ягоды, грибы</option>
                    <option>Молочная продукция</option>
                    <option>Сыры</option>
                    <option>Бакалея</option>
                </select>
            </div>
            <main id="production_conteiner">
                <!-- <figure class="fig">
                    <a href="#popap_1">
                    <img src="img/плюс.png" type="button" href="#popap_1">
                    </a>
                </figure> -->
            </main>
        </main>
        <footer>
            <img src="img/иконка_footer.png" class="img_footer">
            <p class="text_p_footer">
            <img src="img/геолокация.png" class="geo">
         город Ангарск<br>
         18мкр., д. 19,<br>
         вход со двора,<br>
         около 1 подъезда
            </p>
            <ul class="li_p_footer">
                <li><a href="tel: ********"><img src="img/вотсап.png" class="img_contact_1"><p>********</p></a></li>
                <li><a href=""><img src="img/инстограмм.png" class="img_contact_3"><p></p></a></li>
                <li><a href="tel: ********"><img src="img/вайбер.png" class="img_contact_1"><p>********</p></a></li>
            </ul>
        </footer>
    </div>
    <div id="popap_1">
        <a href="#header" id="cloze_2" onclick="dayn()"></a>
        <div class="popap_body">
            <div class="popap_header">
                <a href="#header" onclick="dayn()"><img src="img/закрыть.png" id="cloze_1"></a>
            </div>
            <div class="popap_mini_body">
            <div class="image_popap">
                <div class="img_popap">
            <input type="file" id="myFile" onchange="myFunction()"></div></div>
            <div class="ul_input">
                <ul class="">
                    <li><textarea name="name" id="popop" class="name_popap">название продукта</textarea></li>
                    <li><div type="text" class="input_rubli">
                        <div class="slider">
                        <div class="slider__wrapper">
                          <div class="slider__items">
                            <div class="slider__item">
                              штуки
                            </div>
                            <div class="slider__item">
                              граммы
                            </div>
                          </div></div></div></div></li>
                    <li><input type="text" class="input_rubli" id="pop" value="цена за шт."></li>
                </ul>
            </div>
        </div> 
            <textarea name="opisanie" id="textarea" class="textarea">описание продукта</textarea>
            </div>
        </div>
    <div id="popap_2">
        <a href="#header" id="cloze_2" onclick="terte()"></a>
        <div class="popap_body">
            <div class="popap_header">
                <a href="#header"><img src="img/закрыть.png" id="cloze_1" onclick="terte()"></a>
                <a href="#"><img src="img/корзина.png" id="korzina" onclick="copyPaste()"></a>
            </div>
            <div class="popap_mini_body">
            <div class="image_popap">
                <div class="img_popap">
            <input type="file" id="myFile" onchange="myFunction()"></div></div>
            <div class="ul_input">
                <ul class="">
                    <li><textarea name="name" class="popop_1" class="name_popap"></textarea></li>
                    <li><input type="text" class="input_rubli"></li>
                    <li><input type="text" class="input_rubli" id="pop_1"></li>
                </ul>
            </div>
        </div> 
            <textarea name="opisanie" class="textarea_1"></textarea>
            </div>
        </div>
    </div>
    <script src="js/code.js"></script>
    <script src="chief-slider.min.js"></script>
</body>
</html>

прошу решить проблему, сам я так и сколько я не пытался, разобратся так и не смог.

Answer 1

Я посмотрел твой код, поплакал, скопировал в codepen, опять поплакал. Ну а по факту, ты про 40-44 линию кода?

Появляются они потому что ты используешь += то-есть добавить io.innerHTML += Пропадают они потому что LocalStorage лимит всего 5MB при перегрузке буфера браузер сам чистит LocalStorage. Есть такая вещь как SessionStorage - она не имеет лимита, и чиститься когда пользователь покинул сайт (то-есть закрыл все закладки сайта в браузере)

Попробуй ключевое слово debugger; добавить в код, и с открытой консолью пройди пошагово и посмотри что происходит.

ps: А если всё-же хочешь развиваться в FrontEnd разработке, посмотри YouTube канал http://www.youtube.com/c/FreelancerLifeStyle (Фрилансер по жизни) мужик конечно не очень, но по крайней мере очень много рассказывает что называется на пальцах.

БЛОГ НА HUSL

прошу помочь с LocalStorage никак не могу разобраться с плюсами, то они прибавляются, то они вообще исчезают, а мне нужен всего один

Ответы (1 шт):