Как сохранить путь картинки в куки?

Question

[jarderRek]

var url = URL.createObjectURL(input.files[0]);
		image.src = url;

Хочу чтобы url сохранялся в куки, как это сделать?

Answer 1

[Rst0]

https://learn.javascript.ru/cookie#zapis-v-documen...

Comments

[jarderRek]

Rst0

var url = URL.createObjectURL(file.files[0]);
		document.cookie = "image=" + url;
		siteImage.src = document.cookie;

Оно не хочет работать.

[Rst0]

html
<input type="file" class="image-url" value=""/>
JS

const body  = document.querySelector('body'),
      input = document.querySelector('.image-url'),
      image = document.createElement('img');
input.oninput = () => {
    let url = URL.createObjectURL(input.files[0]);
    image.src = url;
    console.log(url);
    document.cookie = "image_src=" + encodeURIComponent(url) + "; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"
    console.log(document.cookie);
    body.appendChild(image);
}

результат

работает только на сервере, естественно..

[jarderRek]

Rst0, А, без сервера можно как-то сделать?

[Rst0]

Не спрашиваю зачем,
но файл печенья привязывается к имени хоста и только для него доступен, логически рассуждая.
Иными словами зачем мне куки, если в них надобности нет.
Изначальная их роль - сохранять сеанс для сервера, который при каждом запросе `не помнит`.
Возможно, у задачи есть другие пути решения, если нужно состояние+инфу сохранить.

[jarderRek]

Rst0, На моем сайте картинки можно менять на собственные. Я хочу чтобы после обновление страницы картинки выбранные сохранялись.

[Rst0]

лучше в localstorage сохранять - это более уместно.
https://developer.mozilla.org/ru/docs/Web/API/Wind...
https://learn.javascript.ru/localstorage

[jarderRek]

Rst0, Спасибо!

[jarderRek]

Rst0, Почему оно не хочет работать?
<img alt="Картинка" class="image">

/*add image*/
const file = document.querySelector('.file');
const image = document.querySelector('.image');
uploadButton.onclick = () =>{
	var url = URL.createObjectURL(file.files[0]);
	localStorage.setItem('image', url);
	Image.setAttribute('src', localStorage.getItem('image'));
}

Я и в начале создавал src.

document.querySelector('.image').setAttribute('src', localStorage.getItem('image'));

/*add image*/
const file = document.querySelector('.file');
const image = document.querySelector('.image');
uploadButton.onclick = () =>{
	var url = URL.createObjectURL(file.files[0]);
	localStorage.setItem('image', url);
	Image.setAttribute('src', localStorage.getItem('image'));
}

Ничего не помогает. Помогите пожалуйста.

[Rst0]

у вас что в адресной строке браузера, когда вы этот код запускаете?

[jarderRek]

Rst0, В адресной строке ничего. В локальном хранилище создается объект с именем image, а значение blob.

[Rst0]

const body  = document.querySelector('body'),
                      input = document.querySelector('.image-url'),
                      image = document.createElement('img'),
                      url = window.URL || window.webkitURL;

                if(localStorage.getItem('img') != null){  // если была сохранена картинка
                        img = new Image();
                        img.src = 'data:image/png;base64,'+ localStorage.getItem('img'); // берем что сохранили
                        body.appendChild(img);        //и добавляем к body
                         img.setAttribute('id','oldimage');   // добавляем id  

                }      
                input.oninput = (e) => {
                        let file, img;
                        if ((file = e.target.files[0])) {
                                img = new Image();
                                img.onload = function () {
                                 /* преобразуем в Base64 и кладем в localStorage*/
                                        localStorage.setItem('img', getBase64Image(img, this.width, this.height));
                                };
                                img.src = url.createObjectURL(file); 
                        }
                        body.appendChild(img);                 //и добавляем к body
                        img.setAttribute('id','newimage');   // добавляем id  
                }
                function getBase64Image(img, w, h) {
                      let canvas = document.createElement('canvas');                     
                      canvas.width = w;
                      canvas.height = h;
                      let ctx = canvas.getContext('2d');
                      ctx.drawImage(img, 0, 0);
                      let dataURL = canvas.toDataURL('image/png');
                      return dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
                }

[Rst0]

чтоб сохранить больше чем одну картинку придется им разные имена придумывать или делать массив.
но мысль, думаю, понятна.