一、介绍
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>