Как модифицировать скрипт дабы он запоминал значения и писал их в localstorage?

Question

[DeniSidorenko]

Предыстория: начал использовать в проекте SVg. На каждой странице их достаточно много но многие из них повторяются по несколько раз. Писать svg код в html не мог, было запрещено. И было два варианта либо task для сборки( использую gulp ) либо другой выход. Остановился на импорт как обычные изображение но дабы браузер разворачивал svg код нашел скрипт. И выглядит это как то так

<img src='path/to/svg' class='svg>

А есть скрипт который помогает браузеру разварачивать svg код( т.е в браузере полный svg код) ( это надо было для работы с CSS)

Сам код :

jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                        $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                        $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

        }, 'xml');

});

Предыстория: начал использовать в проекте SVg. На каждой странице их достаточно много но многие из них повторяются по несколько раз. Писать svg код в html не мог, было запрещено. И было два варианта либо task для сборки( использую gulp ) либо другой выход. Остановился на импорт как обычные изображение но дабы браузер разворачивал svg код нашел скрипт. И выглядит это как то так

var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');

// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}

// Remove any invalid XML tags as per validator.w3.org
$svg = $svg.removeAttr('xmlns:a');

// Replace image with new SVG
$img.replaceWith($svg);

}, 'xml');

});
Однако как я упоминал ранее svg много и они повторяются. Но скрипт загружает каждую по новую не сохраняя ее в localstorage. К примеру если я задал в 4 местах то могу заметить во вкладке network что он загрузит ее 4 раза, и за чего на одной странице идет подгрузка по 20-30 файлов вместо 5-6. Возможно ли модифицировать скрипт дабы не было такой ситуации и браузер загружал один файл - один раз. Спасибо заранее буду очень признателен за помощь

Comments

[Kovalsky]

И какая именно возникла проблема при использовании localStorage?

[DeniSidorenko]

Никита Полевой, скрипт не использует localStorage. Он грузит один и тот же файл по нескольк раз. Загрузил один раз пошел чуть дальше снова увидел этот файл снова его грузит.

[Kovalsky]

DeniSidorenko, хорошо, отвечаю на вопрос "Как модифицировать скрипт дабы он запоминал значения и писал их в localstorage?": смотрите в интернетах как работает localStorage, и модифицируете скрипт так, чтобы он сохранял нужные вам значения; вся инфа сто раз разжёвана и общедоступна. Да-да, без описания возникшей сложности ответ выглядит вот так вот пространно. Модификация заключается всего лишь в проверке наличия записи и её добавления в случае отсутствия.

А если вы под вопросом "как модифицировать" имели в виду "перепишите за меня код пожалуйста", то я думаю где-то к двум часам дня (по Москве) подтянутся кармадр*черы, например 0xD34F, и всё вам напишут.