一、介绍

　　　　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. Java入门系列-26-JDBC

    认识 JDBC JDBC (Java DataBase Connectivity) 是 Java 数据库连接技术的简称,用于连接常用数据库. Sun 公司提供了 JDBC API ,供程序员调用接口和 ...

  2. vmstat命令——监控给定时间间隔的服务器的状态值

    vmstat n m 时间间隔为n秒,采集m组数据vmstat n     时间间隔为n秒 # vmstat 2 3 procs -----------memory---------- ---swap ...

  3. FZU 2139——久违的月赛之二——————【贪心】

    久违的月赛之二 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  4. viewport其实没那么难理解

    在学习移动端布局的时候,你肯定听说过"viewport"这个词,然后去问度娘或谷歌.你会惊奇的发现,这个viewport不简单,居然有那么多兄弟——layout viewport. ...

  5. .net EF框架-实现增删改查

    声明一个EF上下文对象 Model dbContext = new Model(); 添加操作(向表中插入一条数据) //声明一个表的实体 Contact contact = new Contact( ...

  6. docker 容器中设置 mysql lampp php软链接

    在容器中安装xampp后,进入到终端,直接输入mysql php 发现报错,命令未被发现.如果输入/opt/lampp/bin/mysql   就可以进入了,所以我们要找到在容器中安装的位置,然后将他 ...

  7. Java集合 之List(ArrayList、LinkedList、Vector、Stack)理解（new）

    一. ArrayList底层实现原理 对比 和Vector不同,ArrayList中的操作不是线程安全的!所以,建议在单线程中才使用ArrayList,而在多线程中可以选择Vector或者CopyOn ...

  8. JavaScript中实现DI的原理（二）

    JavaScript中实现DI的原理 在JavaScript中实现DI,看起来难,实际上原理很简单,它的核心技术是Function对象的toString().我们都知道,对一个函数对象执行toStri ...

  9. Windows 64位下安装Redis教程

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型. Key-Value数据库,并提供多种语言的API. 一.下载 地址:Download redis-latest ...

  10. 02_dubbo实例_多版本号

    [多版本作用] 当一个接口实现,出现不兼容升级时,可以用版本号过渡. 版本号不同的服务之间不能引用. [版本迁移方式] 1.在低压时间段,先升级一半Provider为新版本. 2.再将所有消费者升级为 ...