Javascript-форум - Не работает LocalStorage в самой простой функции

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не работает LocalStorage в самой простой функции (https://javascript.ru/forum/misc/76996-ne-rabotaet-localstorage-v-samojj-prostojj-funkcii.html)

Valeriy__258

11.03.2019 14:21

Не работает LocalStorage в самой простой функции

Добрый день. Хочу сделать так, чтобы рисунок в паинте(максимально простая программа) сохранялся при закрытии браузера. Я новичок в языках программирования, но нужно сдать по предмету эту работу, а я всё никак не могу понять, что я делаю не так ?
Пробовал разные переменные и кидал localStorage в разные места программы, но ничего не получается.
Кто объяснит профану, где он не прав? >_<

Dilettante_Pro

11.03.2019 14:51

Valeriy__258,
Что такое x, который вы хотите сохранить в localStorage?

Valeriy__258

11.03.2019 15:14

Я не знаю, что за переменная там должна быть(
я хочу сохранить свой рисунок в окне канвас в localStorage, чтобы я закрывал браузер, а потом открывал - а рисунок сохранялся

Dilettante_Pro

11.03.2019 17:48

<canvas id = 'c1' width='400' height='200'></canvas>
<button id = 'save' >Save</button>
<img id = 'cImg' src = ''>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var myColor = 'black';
          var img = new Image();
          img.src =  localStorage.getItem('img');
          img.onload = function() {               
                ctx.drawImage(img, 0, 0);
          }
canvas.onmousedown = function() {
   canvas.onmousemove = function(e) {
       var x = e.offsetX,
             y = e.offsetY;
       ctx.fillStyle = myColor;
       ctx.fillRect(x - 5,y - 5,10,10);
   }
   canvas.onmouseup = function() {
      canvas.onmousemove = null;
   }
}
document.querySelector('#save').onclick = function() {
       var imageURI = canvas.toDataURL("image/jpg");
       localStorage.setItem('img',imageURI);
 //      document.querySelector('#cImg').src =  localStorage.getItem('img');
}
</script>

Valeriy__258

11.03.2019 18:06

Цитата:

Сообщение от Dilettante_Pro (Сообщение 504613)

<canvas id = 'c1' width='400' height='200'></canvas>
<button id = 'save' >Save</button>
<img id = 'cImg' src = ''>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var myColor = 'black';
canvas.onmousedown = function() {
   canvas.onmousemove = function(e) {
       var x = e.offsetX,
             y = e.offsetY;
       ctx.fillStyle = myColor;
       ctx.fillRect(x - 5,y - 5,10,10);
   }
   canvas.onmouseup = function() {
      canvas.onmousemove = null;
   }
}
document.querySelector('#save').onclick = function() {
       var imageURI = canvas.toDataURL("image/jpg");
       localStorage.setItem('img',imageURI);
       document.querySelector('#cImg').src =  localStorage.getItem('img');
}
</script>

Круто!
Но мне нужно немного другое(
Нужно, чтобы изображение сохранялось в рабочем поле, т.е. я открыл себе программку в браузере, нарисовал что-то, потом закрыл её, открыл снова, и могу продолжать рисовать на том же рисунке

Dilettante_Pro

11.03.2019 18:34

Valeriy__258,
Изменил пример пост #4

Valeriy__258

11.03.2019 19:04

Цитата:

Сообщение от Dilettante_Pro (Сообщение 504617)

Valeriy__258,
Изменил пример пост #4

Отлично, всё работает! Пытаюсь теперь добавить кнопку очистить через removeItem.
Можно ещё такой вопрос: почему у Вас весь код написан без тегов html, head и body?
Я попробовал раскидать всё в теги, script в head, а всё остальное в body, но код перестал работать(

Valeriy__258

11.03.2019 20:16

Цитата:

Сообщение от Dilettante_Pro (Сообщение 504617)

Valeriy__258,
Изменил пример пост #4

Всё, добавил кнопку обновить и рамку, и всё работает!
Правда с тегами head и body и с их отсутствием не разобрался.. Наверняка, где-то ошибку сделал, поэтому ничего не работает
Спасибо ещё раз!

Dilettante_Pro

12.03.2019 10:38

Цитата:

Сообщение от Valeriy__258

почему у Вас весь код написан без тегов html, head и body?

Потому что здесь песочница умная и сама добавляет чего не хватает - можете посмотреть в консоли.
Вот вариант с html, head, body.

<!DOCTYPE html>
<html>
   <head>
      <script>
         window.addEventListener('load', function () {
            var canvas = document.getElementById('c1');
            var ctx = canvas.getContext('2d');
            var myColor = 'black';
            var img = new Image();
            img.src =  localStorage.getItem('img');
            img.onload = function() {               
                ctx.drawImage(img, 0, 0);
            }
            canvas.onmousedown = function() {
               canvas.onmousemove = function(e) {
                   var x = e.offsetX,
                         y = e.offsetY;
                   ctx.fillStyle = myColor;
                   ctx.fillRect(x - 5,y - 5,10,10);
               }
               canvas.onmouseup = function() {
                   canvas.onmousemove = null;
               }
            }
            document.querySelector('#save').onclick = function() {
                var imageURI = canvas.toDataURL("image/jpg");
                localStorage.setItem('img',imageURI);
            }
         });
      </script>
   </head>
   <body>
      <canvas id = 'c1' width='400' height='200'></canvas>
      <button id = 'save' >Save</button>
   </body>
</html>

SuperZen

12.03.2019 13:33

Автосохранение %)

<!DOCTYPE html>
<html>

<head>
  <script>
    (function () {
      let canvas = null
      document.addEventListener('DOMContentLoaded', function () {
        canvas = document.getElementById('c1')
        var ctx = canvas.getContext('2d');
        var myColor = 'black';
        let localStorageImage = localStorage.getItem('img')
        console.log('localStorageImage', localStorageImage)
        if (localStorageImage) {
          var img = new Image();
          img.src = localStorageImage;
          img.onload = function () {
            ctx.drawImage(img, 0, 0);
          }
        }
        canvas.onmousedown = function () {
          canvas.onmousemove = function (e) {
            var x = e.offsetX,
              y = e.offsetY;
            ctx.fillStyle = myColor;
            ctx.fillRect(x - 5, y - 5, 10, 10);
          }
          canvas.onmouseup = function () {
            canvas.onmousemove = null;
          }
        }

        document.getElementById('clear').addEventListener('click', function () {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          localStorage.removeItem('img')
        })
      });
      window.onunload = function () {
        if (canvas) {
          var imageURI = canvas.toDataURL("image/jpg");
          localStorage.setItem('img', imageURI);
        }
        return null
      };
    })()
  </script>
</head>

<body>
  <canvas id='c1' width='400' height='200'></canvas>
  <button id='clear' type='button'>clear</button>
</body>

</html>

Часовой пояс GMT +3, время: 19:21.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице