标签: localforage

我使用localForage在网站上存储一些数据以使其脱机.

我想有一个键并附加到值/数组.

到目前为止,我只能计算如何从存储中检索整个键/值,然后再次追加并设置整个键/值.这似乎非常浪费,并且当键/值变大时可能会出现问题.

var obj = ...
localforage.getItem('documents', function(err, value) {
  value.push(obj);
  localforage.setItem('documents', value);
}

有没有更有效的方法来做到这一点？注意性能问题的关键/值必须有多大.

我正在努力收集angular,localForage并angular-localForage与webpack.我的require文件看起来像这样,

// Angular libs
require('../bower_components/angular/angular.min.js')
require('../bower_components/angular-resource/angular-resource.min.js')
require('../bower_components/angular-ui-router/release/angular-ui-router.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')

require('../bower_components/localforage/dist/localforage.min.js')
require('../bower_components/angular-localforage/dist/angular-localForage.js')

angular-resource,angular-ui-router并且ui-bootstrap工作得很好,但是当我需要angular-localForage的东西开始变得复杂.我webpack.config.js看起来像这样,

var path = require('path')

module.exports = {
    entry: "./src/app/app.js",
    output: {
        path: './src/assets',
        filename: "bundle.js",
        publicPath: 'assets/'
    }
    , module: {
        loaders: [
            {test: /\.less$/, loader: "style!css!less"},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

        ]
    }
    , resolve: {
        root: [ path.resolve('./src/bower_components') …

我正在尝试将一个 blob 保存到 localforage，然后检索它并显示它。它在一段时间内工作正常，但在几次页面刷新或浏览器关闭后，我在某些 blob 上收到错误。完整错误如下：

Failed to load resource: The operation couldn\xe2\x80\x99t be completed. (WebKitBlobResource error 1.)\n

这是我的其余代码。将项目保存到 localforage：

canvas.toBlob(function(blob){\n  allItems.push({"string":string,"blob":blob});\n  localforage.setItem("savedItems",allItems);\n},"image/jpeg",0.02);\n

从 localforage 加载项目：

localforage.getItem("savedItems").then(function(jsonData){\n  if(jsonData==null){allItems=[];}\n  else{allItems=jsonData;}\n});\n

将 blob 添加到图像源：

let thisURL = window.URL || window.webkitURL;\nlet url=thisURL.createObjectURL(allItems[k]['blob']);\nimg.src=url;\n

这似乎是 Safari 特有的问题，因为我无法在 Chrome 中复制它。

由于某种原因axios-cache-adapter，没有缓存GET文件下载请求，我认为这是由于responseType: 'blob'axios 生成 src 所需的设置（因为我对不需要设置此字段的其他请求没有缓存问题）网址（根据这个答案）：

src: URL.createObjectURL(new Blob([response.data])),

我的适配器设置如下：

// set axios defaults
axios.defaults.headers.common = {
  'Authorization': `Bearer ${accessToken}`,
  'Content-Type': 'application/json'
};

const configureAxios = async () => {

  await localforage.defineDriver(memoryDriver);

  const forageStore = localforage.createInstance({
    driver: [
      localforage.INDEXEDDB,
      localforage.LOCALSTORAGE,
      memoryDriver._driver
    ],
    name: 'my-cache'
  });

  return setup({

    // `axios-cache-adapter` options
    cache: {
      maxAge: 15 * 60 * 1000,
      exclude: {
        query: false
      },
      store: forageStore,
    }
  });
};

// call this function in …

请帮我处理以下内容.

我一直在将我的AngularJS应用程序从localStorage转换为localForage.

在我的应用程序中,我分配了像这样的localStorage值.

window.localStorage.setItem('localSavedValue','SavedValue');

然后我正在检索这样的数据,

var myValue = window.localStorage.getItem('localSavedValue');

所以当我在console.log(myValue)时; //输出'SavedValue'

我试着用localForage似乎无法做到这一点,

$localForage.setItem('localSavedValue','SavedValue');
var myValue = $localForage.getItem('localSavedValue');
console.log(myValue); // returns an object.

我没有将值设置为myValue.

我确信这是与promises有关的事情,因为当我使用回调时我可以访问正确的'myValue'但是我想把它从调用中取出来用于其余的服务.

还要注意,我在服务中因此无法分配到$ scope(除非我不知道如何).

感谢任何帮助.

谢谢B

我有一个像这样的本地 indexeddb：

// Unlike localStorage, you can store non-strings.
localforage.setItem('123456', {
  //0 - Ref cli
  ref_cli: '4720271',
  //1 - Offre client
  offre_cli: 'Offre 3',
  //2 - Date RDV
  date_rdv: '22/09/2015',
  //3 - Heure rdv
  heure_rdv: '10H00',
  //4 - Nom client
  nom_cli: 'DURAND',
  //5 - Prénom client
  pren_cli: 'Pierre',
  //6 -Adresse client
  adr_cli: '3 rue de l\'église',
  //7 - CP client
  cp_cli: '75000',
  //8 - Ville client
  ville_cli: 'PARIS',
  //9 - Batiment
  bat_cli: 'A',
  //10 - Escalier
  esc_cli: '2',
  //11 - …

我在Web应用程序中使用Redux Persist和LocalForage。我有一系列在登录时触发的操作，这些操作会更新有关用户的一些数据。触发所有操作并将数据以JSON格式保存在indexedDB上后，IndexedDB的大小为〜1.4Mb。

但是，如果我刷新页面从而再次触发操作，或者注销并重新登录，即使IndexedDB内的值不发生变化（我已经使用JSON diff工具进行了两次检查），存储的大小就会不断增加。最终，Chrome会在增长几MB后清除掉其中的一部分，但不会恢复到最初的正确大小。

IndexedDB JSON完全相同，没有任何区别，但是大小存在巨大差异。有谁知道为什么会这样，我该如何预防呢？我还想知道Chrome何时/多久清除一次使我的IndexedDB混乱的数据，但是我却找不到任何参考。

非常感谢

Taking the following pseudo code

localforageStore.setItem('foo', 'bar')
    .then(console.log('foo is persisted to disk')); 
localforageStore.getItem('foo')
    .then(v => console.info('foo is '+v));   // A, B or C? 

Is the console.info:-

• A. Guaranteed to display 'bar'

• B. Guaranteed to display 'undefined'

• C. Indeterminate

即，即使对磁盘的写入是异步的，同步读取也会从indexeddb和/或localforage内部的缓冲区中解析吗？

当我想要向应用程序添加离线模式时,我将其转储到localForage中,这似乎是一种有趣的方式.

尽管如此,我还是没有区别于一个简单的localStorage API.任何人都可以帮助我吗？

我试图通过创建 localForage 的全局实例来为纯形式的Web 组件添加localForage支持：

// create a global appStorage object that mimics localStorage API (greater storage)
window.appStorage = localforage.createInstance({
    driver: [
        localforage.INDEXEDDB,
        localforage.WEBSQL,
        localforage.LOCALSTORAGE
    ],
    name: 'product-name',
    version: 1.0,
    storeName: 'app'
});

并通过storage属性将其分配给纯形式的实例：

<pure-form src="path-to-schema.json" storage="appStorage"></pure-form>

在内部， pure-form 执行window[self.storage]以获取存储对象的句柄并使用.getItem,.setItem同步设置和检索值。

麻烦的是localForage是异步的，也就是说.getItem，.setItem希望通过回调返回值。因此，我当前的逻辑将不起作用：

// get value from web storage
var storedContent = window[self.storage].getItem('item-key');

我意识到我可以将调用包装在 Promise 中，但就其而言，纯形式不需要承诺，我不想为此添加该依赖项。

我想做的是检查是否.getItem或.setItem需要回调，如果是，则相应地修改代码...