静态资源（JS/CSS）存储在localStorage有什么缺点？为什么没有被广泛应用？-H5 Tutorial-php.cn

静态资源（JS/CSS）存储在localStorage有什么缺点？为什么没有被广泛应用？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-07 08:41:40

Original

1734 people have browsed it

移动端完全没有兼容问题，只要写版本更新判断就行。
PC端支持到IE8，不支持则请求。
目前一个新项目准备这样架构，但隐隐担忧有什么致命缺点，因为现在还没有被广泛应用。

回复内容：

谢邀。经常用，所以过来回答一下。

我的看法是：PC上用的价值不大，移动端单页面应用(也有叫webapp)值得尝试。

这里要首先提出一个关于静态资源管理和SEO(搜索引擎优化)方面的关联问题：如果要做SEO，那么CSS必然不能进行LS(localstorage)的本地缓存优化。这个原因很简单：

要进行SEO，必须直接输出完整HTML，因此必须让样式在头部以link标签加载。如果先输出HTML，后用js从本地缓存读取样式再插入，会出现严重的阻塞和闪烁问题，相信正常人是不会这么干的。

然后再更正一件事，就是取出localstorage的代码不一定要eval，eval很evil，一个eval函数很有可能影响整个js文件的压缩（出现eval之后不能对变量名进行替换），当然，我们可以通过一些hack避免这种压缩问题，不过我喜欢这样搞：

<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'script'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">code</span> <span class="o">=</span> <span class="s1">'!function(){'</span> <span class="o">+</span> <span class="nx">getCodeFromLocalStorage</span><span class="p">()</span> <span class="o">+</span> <span class="s1">'\n}();'</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">code</span><span class="p">));</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>

Copy after login

先说说主要会面临的问题
1、执行速度，读取后使用eval或创建