Question

我的webapp主要用于手机上，因此我希望存储静态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文件。任何例子都会有帮助。

Answer 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/

Answer 2

在您的示例中，它应该是var retrievedObject = JSON.parse(localStorage.getItem('testObject'));。因为localStorage现在只能处理字符串值对，所以尝试组建一个像这样的新对象是值得的：

{type: "css", blob: "<serverside rendered>", deferred: false}

以下是一个例子：

＆＃13;

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);

＆＃13;

<div class="unknown">Defaultly, i have no style.</div>
<button>Add style from localStorage</button>

＆＃13;

您可以通过服务器端实现填充这些对象的数组，然后将它们附加到dom。这个例子只处理CSS并且对于被保护的项目没有区别，因为它将所有内容附加到<head>，但是你明白了。

我复制了这个答案的有趣部分：https://stackoverflow.com/a/6211716/3244925

这些对象可以使用：localStorage.setItem('resources', JSON.stringify(resources));保存在localStorage中，稍后可以重复使用。

<小时/>

更新

我觉得你的问题的答案可能要简单得多。如果你的.css和.js文件是静态的，你可能只需要组成一个外部资源数组（网址），然后将这些网址添加到<head>和<body>，一旦你从它们加载它们localStorage。这将使这个内联样式和javascript无用，这将是一个更清洁的解决方案。

Answer 3

首次加载网页后，浏览器会将其所有主要内容存储在缓存中。因此，由于此缓存过程没有偏见，因此无法在浏览器缓存下保持任何内容稳定。

HTML5有一个名为本地存储的实用程序。它用于在浏览器提供的特殊存储下保存cookie和文本等数据。缓存与它没有任何关系。

但是，您可以将css以字符串格式存储在localstorage中，但不能存储在css文件中。

在本地存储中存储CSS和JS

3 个答案:

更新