以前使用本地存储,首先会想到localstorage或者session storage,将要存储的数据转化成字符串后进行setItem操作,但是使用local storage 有几个问题: 
1、它是同步的,不管数据多大,我们需要等待数据从磁盘读取和解析,这会减慢我们的应用程序的响应速度,如果放到移动设备上,可想而之。 
2、仅支持字符串,如果是存对象还需要将对象JSON.stringify({name:”houyuewei”,age:20})下,用的时候再次转换,真是麻烦。 
3、不能加密存储到硬盘上,增加了很多危险性。 
4、永久存储,并且存储容量限制在10M

LocalForage就解决了上面的问题,Mozilla 开发了一个叫 localForage 的库 ,使得离线数据存储在任何浏览器都是一项容易的任务。localForage 是一个使用非常简单的 JavaScript 库的,提供了 get,set,remove,clear 和 length 等等 API,还具有以下特点: 
支持回调的异步 API; 
支持 IndexedDB,WebSQL 和 localStorage 三种存储模式; 
支持 BLOB 和任意类型的数据,让您可以存储图片,文件等。 
支持 ES6 Promises 
支持angularjs,requires,embers等

安装 
可以通过npm或者bower安装

npm install localforage
  • 1

或者

bower install localforage
  • 1

基本用法:

key/value
localforage.setItem('key', 'value', doSomethingElse);
对象
var obj = { value: "hello world" };
localforage.setItem('key', obj, function(err, result) { alert(result.value); }); 回调
localforage.getItem('key', function(err, value) {
if (err) {
console.error('Oh noes!');
} else {
alert(value);
}
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

存储 Blobs,TypedArray(具体的类型附在参考链接中),其他的js对象 
为了支持这几种类型,需要做一个配置,如下:

localforage.config({
driver : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
name : 'myApp',
version : 1.0,
size : 4980736, // Size of database, in bytes. WebSQL-only for now.
storeName : 'keyvaluepairs', // Should be alphanumeric, with underscores.
description : 'some description'
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

参考链接:https://developer.mozilla.org/en-US/Apps/Build/Offline 
https://github.com/mozilla/localForage#how-to-use-localforage 
https://mozilla.github.io/localForage/#setitem 
http://www.html5rocks.com/en/tutorials/offline/storage/ 
http://www.html5rocks.com/en/tutorials/offline/whats-offline/ 
https://www.nczonline.net/blog/2010/04/13/towards-more-secure-client-side-data-storage/

转载自 https://blog.csdn.net/houyaowei/article/details/51445566

前端存储loaclForage的更多相关文章

  1. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

  2. 前端存储之indexedDB

    在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速.高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了ind ...

  3. 前端存储 - localStorage

    发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者 ...

  4. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  5. 前端存储 (5) - service worker 离线存储

    service worker 离线存储 简介: 一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问 service worker 构建的网站不会出现这个错误,因为所有的 请求都是先 ...

  6. localStorage前端存储数据

    <!DOCTYPE html> <html> <head> <title>localStorage演示</title> <meta c ...

  7. 前端数据存储方案集合(cookie localStorage等)以及详解 (一)

    客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前端存储的问题,因为最近在做小程序相关的内容.但是,在开发过程中,我们难免会遇到 token 存储. 代码缓存. 图片存储等等. 以及可 ...

  8. 前端数据存储方案集合(cookie localStorage等)以及详解 (二)

    前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...

  9. 【bird-front】前端框架介绍

    bird前端项目,基于react.antd.antd-admin,封装常用数据组件,细粒度权限解决方案. bird-front是基于react的后台管理系统前端项目,框架构建部分严重借鉴于antd管理 ...

随机推荐

  1. geth中UTC文件与私钥的关系

    在创建了自己的本地区块链后,我们会得到一个文件夹keystore,该文件夹是用来存储你在这个区块链中创建的账户的备份钥匙文件,比如在这里我有一个账户的备份钥匙文件为:UTC--2018-07-12T0 ...

  2. springboot跨域配置

    前言: 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时,一个资源会发起一个跨域HTTP请求(Cross-site HTTP request).比如说,域名A ( http://dom ...

  3. Android逆向学习资料

    Android逆向基础之Dalvik虚拟机: https://lyxw.github.io/archivers/Android%E9%80%86%E5%90%91%E5%9F%BA%E7%A1%80% ...

  4. android RadioGroup中设置selector后出现多个别选中的RadioButton的解决办法

    在一个RadioGroup组中假如有三个或者以上的RadioButton,当然你需要给这些RadioButton设置selector.设置其中的一个为默认选中状态(在xml中设置).当程序在手机上运行 ...

  5. Java实现几种常见排序方法

    日常操作中常见的排序方法有:冒泡排序.快速排序.选择排序.插入排序.希尔排序,甚至还有基数排序.鸡尾酒排序.桶排序.鸽巢排序.归并排序等. 以下常见算法的定义 1. 插入排序:插入排序基本操作就是将一 ...

  6. 复习C#的方法Math.Max和Math.Min

    温故而知新,今天学习Math.Max和Min的方法.这2个方法,均需要传入2个参数,返回参数中最大值和最小值. class Ac { public void LeanMathFunction() { ...

  7. 浅淡volatile原理

    Volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的“可见性” Volatile的官方定义 Java语言规范第三版中对volatile的定义如下: java编程语言允 ...

  8. P3830 [SHOI2012]随机树

    P3830 [SHOI2012]随机树 链接 分析: 第一问:f[i]表示有i个叶子结点的时候的平均深度,$f[i] = \frac{f[i - 1] + 2 + f[i - 1] * (i - 1) ...

  9. Linux系统特殊变量

    系统给定的特殊变量: 变量名 作用 $0 当前脚本的名字 $n 传递给脚本或者函数的参数,n表示第几个参数 $# 传递给脚本或函数的参数个数 $* 传递给脚本或函数的所有参数 $@ 传递给脚本或者函数 ...

  10. 基于Angular+WebAPI+OData的增删改查

    对于在ASP.NET WebAPI中怎么使用OData,已经在我前面的日志中的说明, 在ASP.NET Web API中使用OData 在这个示例中.我新建了一个Order的实体,在前端使用Angul ...