将 CSS 和 JS 存储在本地存储中
Posted
技术标签:
【中文标题】将 CSS 和 JS 存储在本地存储中【英文标题】：Storing CSS and JS in Local Storage 【发布时间】：2015-09-24 19:42:52 【问题描述】：我的 web 应用程序主要用于移动设备，因此我希望存储静态 CSS 和 JS 文件以减少加载时间。这是我在某处读到的连 Google 和 Bing 都在使用的技巧。
虽然我知道获取和设置值很容易：
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
...但我不确定如何设置、获取和渲染/执行 CSS 样式表和 javascript 文件。任何例子都会有所帮助。
【问题讨论】：
这样做有什么价值？缓存肯定是这样做的？ @JamieBarker programmers.stackexchange.com/questions/105524/… 我明白了，但是我觉得这里接受的答案被接受了，因为海报已经有偏见了。获得最高票数的两个答案对我来说似乎最合适，尤其是 MainMa 的那个有 75k 代表，而不是接受的回答者有 206 个代表。 提防 ios 移动设备...当处于Private Browsing 模式时，它们不允许使用本地存储 - 请注意
这个问题很危险。 LocalStorage 有 10 MB 的限制（Chrome 中的每个来源，完全在其他浏览器中）。 CSS 和 JS 如果 webapp 非常大，你可以填满这个内存。不过是个好主意。否则，存在允许您存储无限（理论上）数据的 WebSQL 技术和 Transactional DB 技术。
【参考方案1】：
也许您正在寻找 appCache，它会一次性下载您的文件源，并且仅检查 appcache 文件是否被修改以更新您的源。
这实现起来非常简单。
更新您的 html
<html manifest="myfile.appcache">
在项目根文件夹中创建您的 appcache 文件：myfile.appcache
CACHE MANIFEST
# LIST ALL YOUR FILES
NETWORK:
*
查看官方文档了解更多信息：http://www.w3schools.com/html/html5_app_cache.asp
来自 html5rocks 的很好的解释：http://www.html5rocks.com/en/tutorials/appcache/beginner/
【讨论】：
Gmail 使用 localStorage 和 App Cache，我也试试。【参考方案2】：在您的示例中，它应该是var retrievedObject = JSON.parse(localStorage.getItem('testObject'));。由于 localStorage 目前只能处理字符串值对，因此值得尝试像这样组成一个新对象：
type: "css", blob: "<serverside rendered>", deferred: false
这是一个例子：
var resources = [
type: "css", blob: ".unknown color: red; div margin: 20px; ", deferred: false
]
function appendResources()
var head = document.getElementsByTagName("head")[0];
for(var resourceIndex in resources)
var resource = resources[resourceIndex]
if(resource.type == "css")
/* https://***.com/a/6211716/3244925 */
var element = document.createElement("style");
element.type = "text/css";
element.appendChild(document.createTextNode(resource.blob));
head.appendChild(element)
document.getElementsByTagName("button")[0].addEventListener("click", appendResources);<div class="unknown">Defaultly, i have no style.</div>
<button>Add style from localStorage</button>您可以通过服务器端实现填充这样的对象数组，然后将它们附加到 dom。这个例子只处理 CSS，对延迟项目没有任何影响，因为它将所有内容附加到 <head>，但你明白了。
我复制了这个答案的有趣部分：https://***.com/a/6211716/3244925
这些对象可以保存在 localStorage 中，使用：localStorage.setItem('resources', JSON.stringify(resources));，以后可以重复使用。
更新
我觉得你的问题的答案可能要简单得多。如果您的 .css 和 .js 文件是静态的，您可以只组成一个外部资源 (url) 数组，然后在从 localStorage 加载它们后，将这些 url 附加到 <head> 和 <body>。这将使这个内联样式和 javascript 变得无用，这将是一个更清洁的解决方案。
【讨论】：
【参考方案3】：首次加载网页后，浏览器会将其所有主要内容存储在缓存中。所以，由于这个缓存过程没有偏见，你不能让任何内容在浏览器缓存下稳定。
HTML5 有一个称为本地存储的实用程序。它用于将cookies和text等数据保存在浏览器提供的特殊存储下，缓存与它没有任何关系。
但是，您可以将 css 以字符串格式存储在 localstorage 中，但不能存储在 css 文件中。
【讨论】：
你能建议任何代码sn-p来存储“本地存储中的字符串格式的css”吗？以上是关于将 CSS 和 JS 存储在本地存储中的主要内容，如果未能解决你的问题，请参考以下文章