静态资源（JS/CSS）存储在localStorage有什么缺点？为什么没有被广泛应用？-H5教程-PHP中文网

回复内容：

首页

web前端

H5教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:41 AM

ie8

移动端完全没有兼容问题，只要写版本更新判断就行。
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>

登录后复制

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7748

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

显示更多

Related knowledge

h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。

h5怎么制作点击图标 Apr 06, 2025 pm 12:15 PM

制作 H5 点击图标的步骤包括：在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性，设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作，如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

什么是H5编程语言？ Apr 03, 2025 am 12:16 AM

H5不是独立编程语言，而是HTML5、CSS3和JavaScript的集合，用于构建现代Web应用。1.HTML5定义网页结构和内容，提供新标签和API。2.CSS3控制样式和布局，引入动画等新特性。3.JavaScript实现动态交互，通过DOM操作和异步请求增强功能。

H5指的是什么？探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo