LocalStorage存储
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字符串反序列化为对象。
参考文章:
2.Quick tip: using HTML5 localstorage to store JSON objects on a device in your PhoneGap app
6.Creating a CRUD form with HTML5 Local Storage and JSON
9.Storing Objects in HTML5 localStorage
11.Js 基于html5-localStorage方法 制作的 "我的便签本"
12.使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Storage
13.CRUD operations with local storage as a database
LocalStorage存储的更多相关文章
- 使用sessionStorage、localStorage存储数组与对象(转)
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- localStorage存储对象,sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- localStorage存储数组,对象,localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
- LocalStorage存储JSON对象的问题
LocalStorage存储JSON对象的问题 localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...
- localstorage存储对象
之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem(" ...
- HTML5 WEB Storage - localStorage存储位置在哪
localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...
- Android WebView js混合cookie和localStorage存储
一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...
随机推荐
- scanf与printf用法详解
一.scanf家族 1.scanf家族的原型 int scanf(char const *format,...); int fscanf(FILE *stream,char const *format ...
- XPath在asp.net中查询XML
.NET Framework 2.0中可以使用System.Xml.XPath命名空间下的类对XML文档进行基于路径的查询,在查询过程中需要构造类似SQL的查询字符串,该字符串遵循XPath语法.它由 ...
- JQ第一篇
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- WebService到底是什么
WebService到底是什么 http://blog.csdn.net/wooshn/article/details/8069087 张孝祥WebService http://wenku.baid ...
- Android Studio之build.gradle小技巧
一: 当你工程引用android 的support包的时候,常常会这样写: dependencies { compile 'com.android.support:recyclerview-v7:22 ...
- Struts2中在Action里面向前端页面传值的方法总结
由于在Action中并不能直接诶访问Servlet API,但它提供了相关类ActionContext来访问HttpServletRequest.HttpSession和ServletContext, ...
- GitBook整理
GitBook整理 ECMAScript 6 -- 中文文档 Apache 2.2 --中文官方文档 Redux --React配套架构 英文 express --Node.js 服务端框架 Hexo ...
- 正则表达式之match与exec【转的 楼兰之风】
彻底领悟javascript中的exec与match方法 阅读本文之前,请先看下面一道题: 题目17:Read the following javascript code: var someText= ...
- Unix/Linux环境C编程入门教程(20) 搭建基于Mac的 Xcode 与 QT 开发环境
1.启动 Vmware,如果没有 VMware 的同学,请看前面我们搭建 VMware 的视频 2.打开虚拟机以后,出现虚拟机界面 3 新建一个虚拟机 4 选择自定义,单击下一步 5 选择默认的 VM ...
- MFC的规则DLL中资源使用的问题
今天刚刚做了一个静态链接到MFC的规则dll,即“Use MFC in a static library“,该dll用来显示一个窗体.然后在一个mfc可执行程序A.exe中调用这个dll文件,可以正常 ...