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. ReactNative常见报错

    1.导出模块错误 遇到这样的错误,首先检查代码有闭合一致,如果没有错误的话,则去检查是否是导出模块的错误. 如: export default moduleName; 改为: module.expor ...

  2. 新闻公布系统 (Asp.net 三层架构 )

    2012年度课程设计---新闻公布系统(小结)                                                                             ...

  3. BZOJ 1833 ZJOI2010 count 数字计数 数位DP

    题目大意:求[a,b]间全部的整数中0~9每一个数字出现了几次 令f[i]为i位数(算前导零)中每一个数出现的次数(一定是同样的,所以仅仅记录一个即可了) 有f[i]=f[i-1]*10+10^(i- ...

  4. Web.config配置和节点介绍

    Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中 ...

  5. javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别

    javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...

  6. Hadoop学习笔记——入门指令操作

    假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭启动HADOOP1. 进入HADOOP_HOME目录. 2. 执行sh bin/start-all. ...

  7. 享受一下大神的感觉, unity中用C#自己封装dll

    第一次写博客,有什么不对的地方,欢迎大家指出 (1)打开vs(本人用的是vs2013)然后建一个项目,如下图所示,选择.ENT3.5的框架,或者低于3.5的,这是因为Unity里面用的框架可能在3.5 ...

  8. hibernate异常

    <h1> nested exception is org.hibernate.LazyInitializationException:</h1> stackoverflow:h ...

  9. Servlet 浅谈(二)

    如何获取初始化参数 容器在初始化的时候,会为了这个Servlet创建一个唯一的ServletConfig,容器会从DD读出Servlet的初始化参数,并把这个参数交给ServletConfig,然后S ...

  10. nginx 禁止非指定域名访问

    nginx 配置如下: server { listen 80 default_server; server_name _; return 404; } # server conf server { l ...