一、介绍

　　　　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. PHP多维数据排序(不区分大小字母)

    1. PHP中最普通的数组排序方法 sort(); 看个例子: <?php $test = array(); $test[] = 'ABCD'; $test[] = 'aaaa'; $test[ ...

  2. 游戏开发者注意！这个音频SDK可以完美兼容所有主流游戏引擎

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云 发表于云+社区专栏 在网络游戏中,无论是大逃杀.棋牌类.电子竞技类还是娱乐休闲类小游戏,玩家和玩家之间的互动.语音聊天是一 ...

  3. FZU 2138——久违的月赛之一——————【贪心】

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

  4. 【Hadoop系列】linux下 root用户免密码登录远程主机 ssh

    SSH原理:[Hadoop系列]linux SSH原理解析 操作环境: CentOS 6.5 操作对象: 用户A主机和远程主机B 正文部分:斜体加粗代表linux指令. linux下 非root用户免 ...

  5. Excel批量生成条形码

    项目要求需要将信息做成条形码的形式,以便通过手持设备直接查看信息,因本次项目信息为固定信息,不需随机生成,故采用本方法: 代码随机生成二维码暂时没有接触,后续有时间会研究 步骤: 1.新建 Excel ...

  6. Win10自带Ubuntu子系统下Mysql安装踩坑记录

    linux系统为win10自带Ubuntu子系统 错误的安装过程 我按照一般的方法安装mysql,安装步骤如下 1.升级源 $ sudo apt-get update 2.安装mysql $ sudo ...

  7. axios拦截器请求头携带token

    转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js

  8. 初识 ElasticSearch

    场景:最近有同事分享了ElasticSearch Inverted Index,所以自己也了解一下基于Lucene的ES. 转载自:http://www.jianshu.com/p/05cff7175 ...

  9. js小数乘法精确率问题

    研究拓扑图百分比乘法计算,带小数位计算会出现值溢出的问题 JS里做小数的乘法运算时会出现浮点错误:  结果是251.89999999999998 而不是251.9  这个问题想必有很多人为之头痛. 那 ...

  10. Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

    去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQ ...