PhoneGap 的存储 API_localStorage 和 sessionStorage
一、介绍
1、为了替代Cookile这门古老的客户端存储技术,Html5的WEB Storage Api 提供了俩中在 客户端存储数据库的方法:localStorage 和 sessionStorage
2、sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久 化的本地存储,仅仅是会话级别的存储。
3、localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。(清除浏览器缓存也没有用)
4、localStorage 和 sessionStorage 通过 window 对象访问
二、使用方法
1、setItem 存储 value
用途:将 value 存储到 key 字段
用法:.setItem( key, value)
代码示例:sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
2、getItem 获取 value
用途:获取指定 key 本地存储的值
用法:.getItem(key)
代码示例:var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
3、removeItem 删除 key
用途:删除指定 key 本地存储的值
用法:.removeItem(key)
代码示例: sessionStorage.removeItem("key"); localStorage.removeItem("site");
4、clear 清除所有的 key/value
用途:清除所有的 key/value
用法:.clear()
代码示例: sessionStorage.clear(); localStorage.clear();
5、其他操作方法:点操作和[]
web Storage 不但可以用自身的 setItem,getItem 等方法存取,也可以像普通对象一样用点(.) 操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
6、localStorage 和 sessionStorage 的 key 和 length 属性实现遍历
sessionStorage 和 localStorage 提供的 key()和 length 可以方便的实现存储的数据遍历,例如下 面的代码:
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
//document.addEventListener("deviceready", myDeviceReadyListener, false);
myDeviceReadyListener()
});
function myDeviceReadyListener(){ var ls = window.localStorage; //写入localstorage
ls.setItem('name','黄剑飞');
ls.setItem('age','50');
ls.setItem('sex','男');
ls.setItem("username","phonegap100");
ls.setItem("password","phonegap100"); //获取localstorage,通过键获取值
ls.getItem("name");
ls.getItem("age");
ls.getItem("sex");
ls.getItem("username");
ls.getItem("password");
}
</script>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content"> </div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
但是这么写的话,每次运行程序都会写一次,应该加上一些判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
//document.addEventListener("deviceready", myDeviceReadyListener, false);
myDeviceReadyListener()
});
function myDeviceReadyListener(){ var ls = window.localStorage; var name=''; if(ls.getItem("name")){
name=ls.getItem("name");
}else{
var services_name='李四'; //第一步 这里是模拟从服务器上获取数据
name=services_name;
ls.setItem('name',name);
} ls.removeItem("name");//清楚一条数据 ls.clear();
}
</script>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content"> </div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
最新文章
- 通过数组和枚举简化GPIO操作编码
- [转载]我的Java后端书架 (2016年暖冬4.0版)
- centos 6安装epel
- PYTHON实现HTTP基本认证(BASIC AUTHENTICATION)
- linux 安装vpn
- Version of SQLite used in Android?
- 函数fsp_seg_inode_page_find_free
- 黑盒测试用例设计方法&;理论结合实际 ->; 判定表驱动法
- pip 安装python环境及打包
- 通过Alexa API获取Alexa排名
- ARM Cortex M3(V7-M架构)硬件启动程序 一
- C# 自定义控件的一些文章和博客
- thiscall仅仅应用于“C++”成员函数(this指针存放于CX寄存器,参数从右到左压)
- hdu 3076 ssworld VS DDD (概率dp)
- Netty 5.0源码分析-ByteBuf
- Redis详细讲解(Redis原理,Redis安装,Redis配置,Redis使用,Redis命令)
- Scala--模式匹配和样例类
- MySQL_参数设置
- jsp请求转发与重定向区别小结
- 淘宝客知道这几个ID,收入将会提高50%
热门文章
- Java ConcurrentModificationException异常原因和解决方法(转)
- 正排索引(forward index)与倒排索引(inverted index)
- EveryThing 使用方法
- BEM样式使用规范
- JS实现中英文混合文字溢出友好截取功能
- Spring Cloud实战之初级入门(四)— 利用Hystrix实现服务熔断与服务监控
- Java面试题之HashMap阿里面试必问知识点,你会吗?
- 二、IOC容器基本原理
- [Java反射基础三]方法反射的基本操作
- Effective C++ .10,11 operator=的约定与注意