1.localStorage存储服务:

.factory('storageSvc', [function () {
return {
//保存数据
save: function (key, value) {
window.localStorage.setItem(key, value);
},
//读取数据
load: function (key) {
return window.localStorage.getItem(key);
},
//删除单个数据
delete: function (key) {
window.localStorage.removeItem(key);
},
//删除所有数据
deleteAll: function () {
window.localStorage.clear();
},
//得到某个索引的key
getIndexKey: function (index) {
window.localStorage.key(index);
}
}
}]);

 2.localStorage 存储方案

localstoage保存的数据,是以key / value的形式存储的。value是一个字符串,因此如果要保存多个数据,有以下处理方式:
一. 使用多个key/value组合,每一个输入框的key都不一样,这样相互之间就不会有影响,就可以保存和获取多个值.
二.将一系列输入框内容保存在同一个key下面,那么对value的形式就需要做一些特殊的处理,一般来说分为两种处理方式:
1. 使用分隔符,例如 value1|value2|value3,使用竖线分割,读取出来后再使用竖线拆分。这种方式优点是是简单,缺点是对保存的顺序有要求。你必须知道第一个是代表什么,第二个是代表什么。
2. 使用序列化的对象,例如要将一些值存到一个对象,再将对象转换为字符串存到localstorage,就像这样:"{key1: 'value1', key2: 'value2'}"。然后读取数据的时候,将字符串再转成对象。这样做的优点是结构清晰,维护方便;缺点是相对麻烦点,且效率相对第1种要低,因为毕竟要做一些序列化和反序列化的操作。

3.在将对象保存为JSON格式前,需要将对象序列化为JSON字符串以及将JSON字符串反序列化为对象。

参考文章:

1.Html5利用json存储复杂数据:

2.Quick tip: using HTML5 localstorage to store JSON objects on a device in your PhoneGap app

3.HTML5本地存储之Web Storage篇

6.Creating a CRUD form with HTML5 Local Storage and JSON

 

8.Key-Value Storage

9.Storing Objects in HTML5 localStorage

10.DOM Storage guide

11.Js 基于html5-localStorage方法 制作的 "我的便签本"

12.使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Storage

13.CRUD operations with local storage as a database

 

LocalStorage存储的更多相关文章

  1. 使用sessionStorage、localStorage存储数组与对象(转)

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  2. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  3. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  4. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  5. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  6. LocalStorage存储JSON对象的问题

    LocalStorage存储JSON对象的问题   localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...

  7. localstorage存储对象

    之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem(" ...

  8. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  9. Android WebView js混合cookie和localStorage存储

    一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...

随机推荐

  1. 关于Makefile.am中与Build相关的变量设置 AM_CPPFLAGS

    http://tonybai.com/2010/10/26/about-variables-related-to-building-in-makefile-am/ 关于Makefile.am中与Bui ...

  2. Windows系统的安装

    一.写在前面        笔者最近因为换工作,在家待业甚感无聊,于是想要整理一些在Windows系统的一些安装方法和下载资源,一来给自己做个备忘,二来把一些不成熟的想法分享出去,希望大家予以指正. ...

  3. 一个利用Dataflow实现的Actor

    最近进行并发数据处理,学习到了 Actor模型,其中最简单的实现方式是一位大牛利用Dataflow实现的. 大牛的方案:http://www.jayway.com/2013/11/15/an-acto ...

  4. linux下的gdb调试工具--内存调试

    接着上一节的代码,在while(1)的循环里面增加代码:sum=0 #include <stdio.h> int main(void) { int sum = 0, i = 0; char ...

  5. PCL点云库增加自定义数据类型

    #include <pcl/filters/passthrough.h> #include <pcl/filters/impl/passthrough.hpp> // the ...

  6. Android_实现静默安装和卸载应用

    转:http://www.cnblogs.com/ondream/archive/2012/04/13/2446138.html 前段时间做了一个批量安装卸载应用程序的小应用,由于安装卸载应用程序的部 ...

  7. Java Notes 00 - Singleton Pattern(单例总结)

    转:http://hukai.me/java-notes-singleton-pattern/ 这里不赘述单例模式的概念了,直接演示几种不同的实现方式. 0)Eager initialization ...

  8. webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...

  9. Springmvc加载静态文件和开启EL表达式的支持

    一.静态文件加载问题 刚开始学习SpringMVC,发现静态文件无法加载 web.xml配置如下: <web-app id="WebApp_ID" version=" ...

  10. hdu 5755 Gambler Bo 高斯消元

    题目链接 给n*m的方格, 每个格子有值{0, 1, 2}. 然后可以对格子进行操作, 如果选择了一个格子, 那么这个格子的值+2, 这个格子上下左右的格子+1, 并且模3. 问你将所有格子变成0的操 ...