一、介绍

　　　　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>

　　

　　　　

PhoneGap 的存储 API_localStorage 和 sessionStorage的更多相关文章

  1. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  2. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  3. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  4. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  6. Html5简单存储localStorage和sessionStorage

    localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 1.localStorage : localStorage 没有时间限制的 ...

  7. 本地存储（cookie&sessionStorage&localStorage）

    好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...

  8. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  9. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

随机推荐

  1. weblogic cluster error-----Could not= open connection with host: 127.0.0.1

    weblogic主机及一台从机启动成功后,在启动从机的时候报错, <BEA-000905> <Could not open connection with host: 127.0.0 ...

  2. mycat核心概念

    一.逻辑库(schema) 业务人员一般是不需要知道数据库中间件的,他们只需要连接到数据库并使用数据库,一切复杂的细节都被中间件给隐藏了,对于业务人员来说中间件即是一个数据库.这里逻辑库的概念就是一个 ...

  3. Java温故而知新（2）多线程详解

    多线程指的是在单个程序中可以同时运行多个同的线程执行不同的任务.线程是程序内的顺序控制流,只能使用分配给序的资源和环境.     一.线程与进程的区别 多个进程的内部数据和状态都是完全独立的,而多线程 ...

  4. Java CAS总结

    文章目录 1. CPU指令对CAS的支持(CPU的cas指令是原子的) 或许我们可能会有这样的疑问,假设存在多个线程执行CAS操作并且CAS的步骤很多,有没有可能在判断V和E相同后,正要赋值时,切换了 ...

  5. 关于Array 栈方法和队列方法

    栈方法: 推入 -- 弹出 // 栈方法 var colors = new Array(); var count = colors.push("red","green&q ...

  6. GetVersion和GetVersionEx

    原文:http://www.cnblogs.com/VOIP/archive/2011/03/22/1990927.html Windows API 中有两个函数可以得到系统版本信息:GetVersi ...

  7. 【统计学】英文概念之Mean和Average的区别

    通过专门检索和其他课本的比较,得到了如下结论.统计学在分析数据时,需要对数据进行最基础的描述性分析.在众多描述分析的指标中,平均数指标能够反映分布数列集中趋势.但是平均数指标包括两类:一类是数值平均数 ...

  8. 【Python】list和tuple 区别比较

    列表 List classmates = ['Michael', 'Bob', 'Tracy'] 元组 Tuple tuple一旦初始化就不能修改,比如同样是列出同学的名字: >>> ...

  9. Android进入页面开始就自动弹出软键盘

    EditText edittext = (EditText)findViewById(R.id.edittext);   edittext.setFocusable(true);   edittext ...

  10. jq重复切换类名

    //重复切换类名"active"$(".probability-rules header").toggleClass("active");