Как сохранять изображения в localStorage?

#javascript #html #jquery #ajax #localstorage

Есть браузерное  приложение (не сайт), для которого нужна такая функция, как cохранять
изображение с удаленного url в localStorage. Для того, что бы потом можно выводить
в тело dom из локлаьного хранилище . Кто уже такое практиковал поделитесь советом как
это реализовать?
    

Ответы

Ответ 1

Вам понадобится преобразование изображения в Base64:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}


Теперь вы можете получить изображение из DOM (допустим в целях кэширования), преобразовать
его в Base64 и сохранить в localStorage:

var image = document.getElementById('imageId');
var b64image = getBase64Image(image);
localStorage.setItem('imageIdCached', b64image);


Как использовать такое изображение?

var dataImage = localStorage.getItem('imageIdCached');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

new Date() не обновляет значения

#javascript #jquery #form #localstorage

Почему new Date возвращает одни и те же значения(одно и тоже время)?
Нужно чтоб при добавление сообщения ему возвращалась соответствующие время(при котором
он был добавлен).
В коде ниже выводятся сообщения с одним и тем же значением времени, пока страницу
не перезагрузишь.

В чем дело? я что то не так сделал или так и должно быть?





var time = new Date();
var timeS = time.toISOString();

$("#add-text").click( function() {

  var message = $("#text").val();

  $("#chat").append("
" + timeS +
" " + message + "
");

  $("#form")[0].reset();

  var chat = $("#chat").html();
  localStorage.setItem("chat", chat);
  return false;
});

if(localStorage.getItem("chat")) {
  $("#chat").html(localStorage.getItem("chat"));
}


  

    
    
  

  





    

Ответы

Ответ 1

Объявляйте время при клике

$('#add-text').click(function(){
   var time = new Date();
   var timeS = time.toISOString();
   /*Далее ваш код*/
})


Ответ 2

у тебя уже получается сначала дата создается и присваивается в момент инициализации
переменной 


  var time = new Date();
   var timeS = time.toISOString();


и его ты уже используешь
Если я правильно понял то тебе надо инициализировать переменную в момент вызова этой
переменой. Как показал @DarkSir при клике

localStorage обновляется. Как запретить

#javascript #массивы #localstorage

if (localStorage.getItem('todo')!=undefined){    
        var tasks = [];
        tasks = JSON.parse(localStorage.getItem('todo'));
        for (var key in tasks) {
            $('#list').append("
" + tasks[key] + "
");
        }
    }

        function SaveTask(){
            var tasks = [];
            $('li.task').each(function(i, el){
                var val = $(el).text();                         
                    tasks.push(val);                        
            }); 
            console.log(tasks); 
            localStorage.setItem('todo', JSON.stringify(tasks));

        }

        function AddTask(){
            var val = $('#new-todo').val();
            var del = $('').text('×');
            var li = $('
').html(val).append(del);
            if (val) {
                li.appendTo($('#list'));
                $('#new-todo').val('');                                 
            }

            del.click(function () {
                li.remove();                
            });
        }   

        $('#btn-enter').click(function () {
            AddTask();
            SaveTask();
        });


При перезагрузке страницы отображаются только последнедобавленные, вместо всех. Если
var tasks = []; сделать глобальной, идет некорректное сохранение в массив. 
Тут 2 варианта - скорректировать  SaveTask() или localStorage. Рассмотрю все...
http://jsfiddle.net/Nata_Hamster/6vhas75k/
    

Ответы

Ответ 1

Вы при сохранении делаете выборку по li.task в то время, как класс task добавляете
только новым записям, поэтому старые записи не входят в выборку для сохранения.

Не меняя оформление страницы можно сделать выборку #list > li - в нее входят и старые
и новые записи.  

Такой селектор css читается как "выбрать все элементы li - прямые потомки элемента
с id list"  

http://jsfiddle.net/6vhas75k/2/

Массив localStorage не сохраняет данные, если сделать refresh страницы

#javascript #json #localstorage

Есть форма, в нее пользователь вписывает данные и они сохраняются в localStorage
массиве под названием todo. Данные вписанные в форму оказываются в ul li списке. Я
проверяю в консоли и они действительно добавляются в массив todo, но после обновления
страницы данные исчезают из списка li пропадает и из массива todo тоже. Я думаю проблема
либо в самом начале кода, где создается массив, либо в dataObjectUpdated(). Вопрос
- как сделать, так чтобы данные сохранялись в массиве и refresh страницы на них не
влиял. Решение желательно на чистом js   



var content = {
  todo: [],
  completed: [],
  uncompleted: []
};
var create = localStorage.setItem('todoList', JSON.stringify(content));
var data = JSON.parse(localStorage.getItem('todoList'));

var button = document.getElementById('button');
button.onclick = function() {
  var input = document.getElementById('input').value;
  if (input) {
    addItem(input);
  }
};

var input = document.getElementById('input');
input.onkeypress = function(e) {
  if (e.keyCode === 13) {
    button.click();
    return false;
  }
};

renderTodoList();

function renderTodoList() {
  for (var i = 0; i < data.todo.length; i++) {
    var value = data.todo[i];
    addItemToDOM(value);
  }
}

function addItem(value) {
  addItemToDOM(value); // функции нет (для экономии места)
  document.getElementById('input').value = '';

  data.todo.push(value);
  dataObjectUpdated();
}

function dataObjectUpdated() {
  localStorage.setItem('todoList', JSON.stringify(data));
}

  

    
ToDoList
  

  

    
    
    
  

  

    

  




    

Ответы

Ответ 1

Проследите логику того, что делается в этих трех строчках:

var content = {todo:[], completed:[], uncompleted:[]};
var create = localStorage.setItem('todoList', JSON.stringify(content));
var data = JSON.parse(localStorage.getItem('todoList'));


Вы создаете пустой content, сохраняете его в localStorage и тут же читаете оттуда в data.

Вот как надо:

var data = {todo:[], completed:[], uncompleted:[]};
var stored = localStorage.getItem('todoList');
if (stored)
  data = JSON.parse(stored);

Когда использовать cookie, а когда localstorage?

#javascript #cookie #localstorage

Cookie и localstorage - второе полностью заменяет первое, или все зависит от ситуации?
Если зависит от ситуации, то как понять, когда использовать одно, а когда другое? 

Коллеги, спасибо за исчерпывающий ответ!
    

Ответы

Ответ 1

Cookie передаются на сервер при каждом запросе — вот и имеет смысл использовать их
для чего-то, что нужно на сервере. Скажем, авторизация, или, например, параметры вида,
нужные при сборке страницы на сервере, такие как язык.

Всё остальное, нужное лишь на уровне фронтенда, как я понимаю, лучше держать в Local
Storage. Туда и влезет больше, и проблем с переполнением не будет (если куков слишком
много, некоторые сервера могут перестать выдавать какой-бы то ни было ответ вообще).

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


Ответ 2

Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество
на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем
хранить 5-10мб или даже больше на длительное время.

Самое большое отличие cookie от localStorage - это то, что первый работает с сервером,
а второй нет.

Источник: https://myrusakov.ru/html5-local-storage.html

Можно ли в LocalStorage хранить js/css/html данные?

#html5 #localstorage

Возможно ли хранить в LocalStorage хранить js/css/html данные, чтоб при каждой перезагрузке
их не тягать? 
    

Ответы

Ответ 1

А зчаем изобретать велосипед? Кэш давно реализован во всех браузерах без ухищрений
с localStorage. Если URL и хэш файла на сервере не меняются, и вы не шлёте в хедерах
явный запрет на кэширование ресурсов, эти ресурсы сохранятся в кэше и при обновлении
страницы будут подтягиваться из него. Также кэш, в отличие от localStorage, меньше
ограничен в объёме, браузер может закэшировать хоть весь статический контент вашего
сайта, в то время как в localStorage помещается всего 2.5-10 МБ данных.


Ответ 2

Да, в localStorage можно хранить любые текстовые данные объёмом до 5 МБ. При превышении
этого объёма браузер запросит у пользователя разрешение на увеличение квоты.

Только зачем? Лучше нормально настроить заголовки кэширования, либо даже использовать
кэш-манифест для создания оффлайн-приложения.

Если появилась идея частичного обновления стилей и скриптов (т. е. с сервера приходит
дифф, а скрипт это дело мёрджит), то Яндекс отказался от этого подхода из-за ухудшения
скорости загрузки и появления сложностей в разработке.

Что лучше: chrome.storage.sync, chrome.storage.local, или localStorage?

#javascript #google_chrome #chrome_extension #localstorage

Что лучше использовать для хранения данных расширения Google Сhrome Extention,  и
в чём кардинальная разница между chrome.storage.sync / chrome.storage.local / localStorage,
с учётом возможности получения этих данных в любой вкладке?

Желательно с примером, пожалуйста.
    

Ответы

Ответ 1

localStorage это хранилище данных стандарта HTML5. 
Документация https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
Хранит данные для текущей страницы. То есть для страницы бэкграунд - один набор данных.
Для страницы контента - другой набор данных (для каждой страницы свой набор). Хранит
данные в виде: имя=значение (значение - строка), то есть не позволяет хранить составные
объекты. При чем, типы вроде true, false будут храниться как "true" и "false".
Обращение к данным происходит синхронным методом:

var x = localStorage.x;
var x = localStorage['x'];
var x = localStorage.getItem('x');


chrome.storage.local - хранилище данных экстеншена. 
Можно получить доступ как со страницы бэкграунд, так и со страницы контента - это
единое хранилище. Позволяет хранить объекты, в отличии от localStorage.
Обращение к данным происходит асинхронно.
Позволяет "слушать" изменения переменных.
Документация по работе с хранилищем https://developer.chrome.com/extensions/storage 

chrome.storage.sync - работает как chrome.storage.local, но хранит данные на сервере,
синхронизированные по google-аккаунту

Для экстеншенов предпочтительнее использовать chrome.storage
local/sync - зависит от ваших потребностей

new Date() не обновляет значения

Почему new Date возвращает одни и те же значения(одно и тоже время)? Нужно чтоб при добавление сообщения ему возвращалась соответствующие время(при котором он был добавлен). В коде ниже выводятся сообщения с одним и тем же значением времени, пока страницу не перезагрузишь.
В чем дело? я что то не так сделал или так и должно быть?

var time = new Date(); var timeS = time.toISOString(); $("#add-text").click( function() { var message = $("#text").val(); $("#chat").append("

" + timeS + " " + message + "

"); $("#form")[0].reset(); var chat = $("#chat").html(); localStorage.setItem("chat", chat); return false; }); if(localStorage.getItem("chat")) { $("#chat").html(localStorage.getItem("chat")); }

Ответ

Объявляйте время при клике
$('#add-text').click(function(){ var time = new Date(); var timeS = time.toISOString(); /*Далее ваш код*/ })

localStorage обновляется. Как запретить

if (localStorage.getItem('todo')!=undefined){ var tasks = []; tasks = JSON.parse(localStorage.getItem('todo')); for (var key in tasks) { $('#list').append("

" + tasks[key] + "

"); } }
function SaveTask(){ var tasks = []; $('li.task').each(function(i, el){ var val = $(el).text(); tasks.push(val); }); console.log(tasks); localStorage.setItem('todo', JSON.stringify(tasks));
}
function AddTask(){ var val = $('#new-todo').val(); var del = $('').text('×'); var li = $('

').html(val).append(del); if (val) { li.appendTo($('#list')); $('#new-todo').val(''); }
del.click(function () { li.remove(); }); }
$('#btn-enter').click(function () { AddTask(); SaveTask(); });
При перезагрузке страницы отображаются только последнедобавленные, вместо всех. Если var tasks = []; сделать глобальной, идет некорректное сохранение в массив. Тут 2 варианта - скорректировать SaveTask() или localStorage. Рассмотрю все... http://jsfiddle.net/Nata_Hamster/6vhas75k/

Ответ

Вы при сохранении делаете выборку по li.task в то время, как класс task добавляете только новым записям, поэтому старые записи не входят в выборку для сохранения.
Не меняя оформление страницы можно сделать выборку #list > li - в нее входят и старые и новые записи.
Такой селектор css читается как "выбрать все элементы li - прямые потомки элемента с id list"
http://jsfiddle.net/6vhas75k/2/

Массив localStorage не сохраняет данные, если сделать refresh страницы

Есть форма, в нее пользователь вписывает данные и они сохраняются в localStorage массиве под названием todo. Данные вписанные в форму оказываются в ul li списке. Я проверяю в консоли и они действительно добавляются в массив todo, но после обновления страницы данные исчезают из списка li пропадает и из массива todo тоже. Я думаю проблема либо в самом начале кода, где создается массив, либо в dataObjectUpdated(). Вопрос - как сделать, так чтобы данные сохранялись в массиве и refresh страницы на них не влиял. Решение желательно на чистом js
var content = { todo: [], completed: [], uncompleted: [] }; var create = localStorage.setItem('todoList', JSON.stringify(content)); var data = JSON.parse(localStorage.getItem('todoList')); var button = document.getElementById('button'); button.onclick = function() { var input = document.getElementById('input').value; if (input) { addItem(input); } }; var input = document.getElementById('input'); input.onkeypress = function(e) { if (e.keyCode === 13) { button.click(); return false; } }; renderTodoList(); function renderTodoList() { for (var i = 0; i < data.todo.length; i++) { var value = data.todo[i]; addItemToDOM(value); } } function addItem(value) { addItemToDOM(value); // функции нет (для экономии места) document.getElementById('input').value = ''; data.todo.push(value); dataObjectUpdated(); } function dataObjectUpdated() { localStorage.setItem('todoList', JSON.stringify(data)); }

ToDoList

Ответ

Проследите логику того, что делается в этих трех строчках:
var content = {todo:[], completed:[], uncompleted:[]}; var create = localStorage.setItem('todoList', JSON.stringify(content)); var data = JSON.parse(localStorage.getItem('todoList'));
Вы создаете пустой content, сохраняете его в localStorage и тут же читаете оттуда в data
Вот как надо:
var data = {todo:[], completed:[], uncompleted:[]}; var stored = localStorage.getItem('todoList'); if (stored) data = JSON.parse(stored);

Можно ли в LocalStorage хранить js/css/html данные?

Возможно ли хранить в LocalStorage хранить js/css/html данные, чтоб при каждой перезагрузке их не тягать?

Ответ

А зчаем изобретать велосипед? Кэш давно реализован во всех браузерах без ухищрений с localStorage. Если URL и хэш файла на сервере не меняются, и вы не шлёте в хедерах явный запрет на кэширование ресурсов, эти ресурсы сохранятся в кэше и при обновлении страницы будут подтягиваться из него. Также кэш, в отличие от localStorage, меньше ограничен в объёме, браузер может закэшировать хоть весь статический контент вашего сайта, в то время как в localStorage помещается всего 2.5-10 МБ данных.