一、介绍

　　　　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. CentOS 7禁止IPv6

    如何在CentOS 7中禁止IPv6 https://Linux.cn/article-4935-1.html 最近,我的一位朋友问我该如何禁止IPv6.在搜索了一番之后,我找到了下面的方案.下面就是 ...

  2. 在ASPNETCORE中获得所有Action

    在ASPNETCORE中获得所有Action 本文旨在记录自己在aspnetcore工作中需要获取所有Action,在查询了资料后进行了几种方法的记录.后期有发现其它方式再进行追加. 一.通过 反射 ...

  3. [springBoot系列]--spring-boot-devtools在Idea中热部署方法

    1 pom.xml文件 注:热部署功能spring-boot-1.3开始有的 <!--添加依赖--> <dependency> <groupId>org.sprin ...

  4. Swift可选链

    //可选链测试 class Person{ var residence:Residence! var name:String init(name:String){ self.name = name } ...

  5. golang学习之win7下go web之revel安装

    接着上回记录的win7下go环境搭建,go的开发,现在除了sublime外,LiteIDE比较推荐,下载链接 下载安装后直接打开,需要配置下go环境(本机使用的是window 386版本),如下: 打 ...

  6. [android] 网络链接类型和渠道

    1.实现方式 1.1使用HttpUrlConnection 1.2使用HttpClient 1.3使用Socket,比如:豌豆荚,聊天工具 2.通讯渠道 2.1 WLAN(wi-fi),100米左右的 ...

  7. javaweb之jsp标签

    1.JSP标签简介 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 2.JSP常用标签 ...

  8. C#学习笔记14

    1.在多个线程的同步数据中,避免使用this.typeof(type).string进行同步锁,使用这3个容易造成死锁. 2.使用Interlocked类:我们一般使用的互斥锁定模式(同步数据)为Lo ...

  9. Effective C++ .15,16获取原始资源和成对使用同类型new和delete

    15. 智能指针可以通过get操作 #include <iostream> #include <cstdlib> #include <memory> using n ...

  10. Java 使用Log4J进行日志操作

    使用Log4J进行日志操作   Log4J简介   Log4J是Apache的一个开放源代码项目,它是一个日志操作包,通过使用Log4J,可以指定日志信息输出的目的地,如控制台.文件.CUI组件.NT ...