一、介绍

　　　　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. linux多线程同步

    1. 互斥量是线程同步的一种机制,用来保护多线程的共享资源.同一时刻,只允许一个线程对临界区进行访问.互斥量的工作流程:创建一个互斥量,把这个互斥量的加锁调用放在临界区的开始位置,解锁调用放到临界区的 ...

  2. 在web应用中使用文件

    使用HTML5 DOM新增的File API,现在可以让网页要求用户选择本地文件,并且读取这些文件的信息了.选择的方式既可以是HTML<input> 元素,也可以是拖拽 . 你可以在chr ...

  3. [android] 天气app布局练习（三）

    主要练习LinearLayout和layout_weight属性 <RelativeLayout xmlns:android="http://schemas.android.com/a ...

  4. redis(5)持久化

    一.持久化 计算机的数据有两种状态: 1)持久态:如硬盘上的数据 2)瞬时态:如内存当中的数据 持久化就是将瞬时数据转换为持久数据的一个过程,但注意持久化并不意味的数据永远存在,针对不同的持久化,数据 ...

  5. request方法总结

     1.获得指定的头 String header = response.getHeader("user-agent"); 2.获得所有头的名称 Enumeration<Stri ...

  6. CentOS Linux 7.3 1611 (Core) 配置静态IP地址

    详见: http://blog.csdn.net/johnnycode/article/details/50184073 设置静态IP 关于静态IP设置官方已经给出答案有兴趣的可以看官方WIKI指导, ...

  7. hdu 4055 Number String(递推DP)

    给一个只含‘I','D','?'三种字符的字符串,I表示当前数字大于前面的数字,D表示当前的数字小于前面一位的数字,?表示当前位既可以小于又可以大于. 问1~n的排列中有多少个满足该字符串. http ...

  8. SQL Server UDF to pad a string

    http://www.mssqltips.com/sqlservertip/1738/sql-server-udf-to-pad-a-string/ declare @l varchar(50) se ...

  9. OpenStack系列

    一.概述 云计算介绍 OpenStack各组件详解和通信流程 二.keystone系列 三.glance系列 四.nova系列 虚拟化介绍 kvm介绍 五.neutron系列 六.horizon系列 ...

  10. mysql索引是什么？索引结构和使用详解

    索引是什么 mysql索引: 是一种帮助mysql高效的获取数据的数据结构,这些数据结构以某种方式引用数据,这种结构就是索引.可简单理解为排好序的快速查找数据结构.如果要查“mysql”这个单词,我们 ...