将 CSS 和 JS 存储在本地存储中答案

【问题标题】：Storing CSS and JS in Local Storage将 CSS 和 JS 存储在本地存储中
【发布时间】：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 技术。

标签： javascript html css local-storage

【解决方案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://stackoverflow.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://stackoverflow.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”吗？