2014-09-22 2 views
2

У меня есть большой файл JavaScript, который я бы предпочел не отправлять клиенту по каждому запросу и он слишком велик для кеширования браузера.Файл Javascript из локального хранилища

Я думал, что сохраню файл до HTML5 local storage и попытаюсь его восстановить. Если файл найден, я хотел бы связать/импортировать/экспортировать (я не знаю правильную терминологию) в ту же область, что и тег html src.

Мой вопрос: как взять файл, который я вытащил из локального хранилища, и получить мою веб-страницу, чтобы узнать его как файл JavaScript, который был включен через тег src? (за вычетом логики для вытягивания файла из памяти)

+0

Я согласен с тем, что вы говорите epascarello, но мой вопрос касается в .js файл, который слишком велик, чтобы быть в кэше браузером. И, по крайней мере, после написания сотен строк 'src =/foo.js' в моих html-шаблонах я теперь понимаю, что я действительно не знаю, что это делает или как имитировать это программно. –

+0

Вы можете сначала запросить jsfile как обычный текст, а затем сохранить этот обычный текст в локальном хранилище. В этот момент вам просто нужно будет так или иначе оценить его. Обратите внимание на эту статью: http://ejohn.org/blog/dom-storage/ –

+0

проверьте, есть ли что-то уже в хранилище, проверьте, не является ли этот файл, если нет создания тега сценария с js of the course, назначьте src для быть вашим js (так работает jsonp), получить содержимое тега скрипта, поместить его в локальное хранилище в виде строки ... и если есть файловое хранилище. Затем получите строку, создайте тег скрипта, загрузите строку. –

ответ

2

Мой вопрос: как я могу взять файл, который я вытащил из локального хранилища и получить мою веб-страницу, чтобы распознать его как файл JavaScript, который был включен с помощью SRC тега?

Два возможных пути (среди других, может быть):

  • создать script элемент, и назначить ваш JS код в качестве «текстовое содержание» этого элемента перед добавлением его в DOM. «Текстовое содержимое» в кавычках здесь, потому что это не так просто, как кажется кросс-браузер - см. F.e. Javascript script element set inner text, Executing elements inserted with .innerHTML или

  • присвоить код сценария к атрибуту script элемента src через Data URI, data:text/javascript,… - но такой подход имеет ряд недостатков, а также в основном в старых IE (ограничение на размер, только «не -navigable ", что означает отсутствие скриптов). Но в зависимости от вашей целевой среды, которая может работать. Вам не обязательно будет base64 кодировать код сценария, URL-процентное кодирование через encodeURIComponent должно работать.

+0

Хороший ответ! Как вы считаете, реальная потребность в том, чтобы больше беспокоиться о поддержке старых браузеров? Я смотрю, например, на моем собственном сайте: у меня только 2,8% моего трафика ниже IE 9. В какой-то момент, конечно же, мы все пожимаем плечами, думая о поддержке этого небольшого процента. –

+0

Поддержка старого браузера - зависит от того, что вам нужно в этом случае ИМХО. Поддержка локального хранилища переходит в IE 8, поэтому, если вы хотите, чтобы он работал там, я бы сказал, что вариант № 1 может быть более безопасным. Но если вы скажете: «Для меня достаточно поддержки IE10 +» - тогда я, вероятно, давал бы вариант №2 попробовать сначала - кажется немного более простым и простым в реализации. – CBroe

+1

@Chris, позвольте мне отметить вас, чтобы вы увидели вышеприведенный комментарий. Я думал, что именно ОП просит больше деталей. – CBroe

0

Вы можете использовать JSON для заполнения содержимого вашего файла и поместить его на локальный ресурс.

var content = JSON.stringify([1, "some info"]);  // '[1,"some info"]' 

localStorage.setItem('fileContent', content); 

// Retrieve 
var content = localStorage.getItem('fileContent'); 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

+0

Это замечательно, если вы хотите хранить данные, но не слишком хорошо справляетесь с функцией. –

+0

Работает ли он вообще с функцией? –

+0

использовать только для хранения «данных», используемых внутри функции. Функция «логика» может быть загружена в файл js. – Maigret

1

Взгляните на это:

http://jsfiddle.net/611e96mz/1/

var tag = getId('testjs'), 
    a = getId('a'), 
    b = getId('b'), 
    c = getId('c'), 
    script; 

a.addEventListener('click', function() { 
    localStorage.setItem('js', tag.innerHTML); 
}); 

b.addEventListener('click', function() { 
    script.textContent = localStorage.getItem('js'); 
}); 

c.addEventListener('click', function() { 
    document.body.appendChild(script); 
    alertMe(); 
}); 


var script = document.createElement("script"); 
script.type = "text/javascript"; 


function getId(x) { 
    return document.getElementById(x); 
} 
Смежные вопросы