Замена старого файла в local storage на новый

257
14 февраля 2018, 10:10

Очень долго искал способ вставить SVG-спрайт из отдельного файла в HTML код, чтобы при этом он оставался чистым, а спрайты вызывались по ID из этого спрайта.

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

(function(window, document) {
    'use strict';
    var file = 'img/svg_sprite.svg',
        revision = 1;
    if (!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true;
    var isLocalStorage = 'localStorage' in window && window['localStorage'] !== null,
        request,
        data,
    insertIT = function() {
        document.body.insertAdjacentHTML('afterbegin', data);
    },
    insert = function() {
      if (document.body) insertIT();
      else document.addEventListener('DOMContentLoaded', insertIT);
    };
    if (isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) {
        data = localStorage.getItem('inlineSVGdata');
        if (data) {
            insert();
            return true;
        }
    }
    try {
        request = new XMLHttpRequest();
        request.open('GET', file, true);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                data = request.responseText;
                insert();
                if (isLocalStorage) {
                    localStorage.setItem('inlineSVGdata', data);
                    localStorage.setItem('inlineSVGrev', revision);
                }
            }
        }
        request.send();
    } catch (e) {}
}(window, document));

В данный момент я не на столько продвинут, чтобы читать такой код, но проблема вот в чём: после того, как я меняю свой спрайт, он не перезаписывается в памяти браузера, а очистка кэша тоже не помогает, приходится вручную удалять его из памяти, что очень неудобно.

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

Answer 1

Может попробовать использовать проверенный и надёжный способ добавления SVG-спрайта из отдельного файла в HTML с помощью <object>.
Тем более здесь есть целый раздел ответов и вопросов, как это сделать. Тег svg-спрайт

Подключение файла спрайта

<object type="image/svg+xml" data="sprite.svg" >
  Your browser does not support SVG
</object>   

Вызов разных иконок из файла спрайта в разных местах HTML

<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#user"></use>
</svg>   
</div> 
<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#home"></use>
</svg>   
</div>

где #user, #home уникальные идентификаторы иконок внутри svg спрайта

Тег <object> добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей:

<?xml-stylesheet type="text/css" href="Svgstyle.css"?>   
<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
Код спрайта 
</svg> 

Структура файла sprite.svg

<?xml-stylesheet type="text/css" href="Svgstyle.css"?>    
<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">   
<symbol id="user" viewBox="0 0 24 24"> 
<path код иконки ..... /> 
</symbol> 
	<symbol id="home" viewBox="0 0 24 24"> 
	<path код иконки ..... /> 
	</symbol>   
	 
	  <symbol id="settings" viewBox="0 0 24 24"> 
	<path код иконки ..... /> 
	</symbol> 
 
</svg> 

READ ALSO
Как реализовать это в Bootstrap4?

Как реализовать это в Bootstrap4?

Нужно реализовать расположение двух элементов как на скриншоте при этом желательно чтобы они были в одном rowЛоготип всегда должен быть по центру,...

257
Не выводится текст через админку Wordpress

Не выводится текст через админку Wordpress

Добрый деньПрошу помочь мне справиться с проблемой

212
есть ли графический редактор html css? [требует правки]

есть ли графический редактор html css? [требует правки]

Добрый деньПишу веб приложение и ищу способ собрать ui(html css) без написания кода

196
Проблема с адаптивностью на boostrap

Проблема с адаптивностью на boostrap

Верстаю используяcol-lg-* Все разрешения, что меньше 1200 начинают делать какие-то непонятно-магические действия (появляется белое окно)

243