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. edit distance leetcode

    这样的字符转换的dp挺经典的, 若word1[i+1]==word2[j+1] dp[i+1][j+1] = dp[i][j]:否则,dp[i+1][j+1] = dp[i][j] + 1.(替换原则 ...

  2. LeetCode Day3

     Lowest Common Ancestor of a Binary Search Tree import java.util.ArrayList; import java.util.List; / ...

  3. ChartControl简单的圆柱案例

    由于工作需要,最近学习了DevExpress控件中的ChartControl,并做了简单尝试,通过程序动态添加数据源到chartControl控件中,绘制了如下的条形图. 条形图的颜色等外观可在cha ...

  4. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  5. windows不能在本地计算机启动SQL Server(MSSQLSERVER)

    windows不能在本地计算机启动sql server 在登录数据库的时候,发现数据库不能登录,提示[无法连接到实例],很明显这是因为数据库服务没有启动导致的,我们打开[服务]启动相应的SQL数据库服 ...

  6. 必须知道的ADO.NET 数据库连接池

    http://www.cnblogs.com/liuhaorain/archive/2012/02/19/2353110.html 题外话 通过前几章的学习,不知道大家对ADO.NET有一定的了解了没 ...

  7. hadoop生态圈安装详解(hadoop+zookeeper+hbase+pig+hive)

    -------------------------------------------------------------------* 目录 * I   hadoop分布式安装   * II zoo ...

  8. .Net之托管堆资源分配

    托管堆分配资源: 一:进程初始化是,CLR要保留一块联系的地址空间,这个地址空间最初并没有对应的物理存储空间.这个地址空间就是托管堆.托管堆还维护着一个指针,我把它称为NextObjPtr.它指向下个 ...

  9. 仿淘宝TAB切换搜索框

    <div class="search"> <div id="searchBox"> <ul class="tab-bar ...

  10. Javascript基本概念(语句和函数)

    语句 for语句 for语句中的初始化表达式,控制表达式和循环后表达式都是可选的,将这三个表达式省略,就会创建一个无线循环. ECMAScript中不存在块级作用域,因此在循环内容部定义的变量也可以在 ...