在客户端存储数据
html5 提供了两种在客户端存储数据的新 方法 ：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对 一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 html5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站 性能 的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且 一个 网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
什么是 HTML5 Web 存储 ?
我们可以使用 HTML5 在用于的浏览器上存储 用户 的浏览数据
在 HTML5 之前，本地存储使用的是 Cookie
但是 Web 存储需要更加的安全与 快速 . 这些数据不会被保存在服务器上，但是这些数据只用于 用户 请求 网站数据 上
它也可以存储大量的数据，而不影响网站的 性能
数据以?键/值?对存在,web 网页的数据只允许该网页访问使用
localStorage 方法
localStorage 方法 存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
实例
<script?type="text/JavaScript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>下面的例子对 用户 访问 页面 的 次数 进行计数：
实例
<script?type="text/javascript"> if?(localStorage.pagecount) ??{ ??localStorage.pagecount=Number(localStorage.pagecount)?+1; ??} else ??{ ??localStorage.pagecount=1; ??} document.write("Visits?"+?localStorage.pagecount?+?"?time(s)."); </script>常用的有如下几个
说明 localStorage sessionStorage 保存数据 localStorage.setItem(key,value) sessionStorage.setItem(key,value) 读取数据 localStorage.getItem(key) sessionStorage.getItem(key) 删除 单个数据 localStorage.removeItem(key) sessionStorage.removeItem(key) 删除 所有数据 localStorage.clear() sessionStorage.clear() 得到某个索引的 key localStorage.key(index) sessionStorage.key(index)提示 :?键/值对通常以字符串存储，当然了，我们可以按自己的需要转换该格式sessionStorage 方法
sessionStorage 方法 针对 一个 session 进行数据存储。当 用户 关闭 浏览器窗口后，数据会被 删除 。
如何创建并访问 一个 sessionStorage：
实例
<script?type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>下面的例子对 用户 在当前 session 中访问 页面 的 次数 进行计数：
实例
<script?type="text/javascript"> if?(sessionStorage.pagecount) ??{ ??sessionStorage.pagecount=Number(sessionStorage.pagecount)?+1; ??} else ??{ ??sessionStorage.pagecount=1; ??} document.write("Visits?"+sessionStorage.pagecount+"?time(s)?this?session."); </script>Web Storage 开发 一个 简单的网站列表程序
接下来我们使用 Web Storage 来开发 一个 简单的网站列表程序，它包含以下 功能
可以输入网站名，网址，以网站名作为 key 存入 localStorage
根据网站名，查找网址；
列出当前已保存的所有网站
下面的 代码 用于保存数据
//保存数据?? function?save(){??var?siteurl?=?document.getElementById("siteurl").value;??var?sitename?=?document.getElementById("sitename").value;?? ????localStorage.setItem(sitename,siteurl); ????alert(" 添加 成功"); }下面的 代码 用于查找数据
//查找数据?? function?find(){?? ????var?search_site?=?document.getElementById("search_site").value;?? ????var?sitename?=?localStorage.getItem(search_site);?? ????var?find_result?=?document.getElementById("find_result");?? ????find_result.innerHTML?=?search_site?+?"的网址是："?+?sitename;?? }完整的 代码 如下
<div?style="border:?2px?dashed?#ccc;width:320px;text-align:center;">????? ????<label?for="sitename">网站名(key)：</label>?? ????<input?type="text"?id="sitename"?name="sitename"?class="text"/>?? ????<br/>?? ????<label?for="siteurl">网?址(value)：</label>?? ????<input?type="text"?id="siteurl"?name="siteurl"/>?? ????<br/>?? ????<input?type="button"?onclick="save()"?value="新增记录"/>?? ????<hr/>?? ????<label?for="search_site">输入网站名：</label>?? ????<input?type="text"?id="search_site"?name="search_site"/>?? ????<input?type="button"?onclick="find()"?value="查找网站"/>?? ????<p?id="find_result"><br/></p>?? </div>这个范例知识简单的演示了下 localStorage 存储与查找，更多情况下我们存储的数据会更复杂
接下来我们使用 jsON.stringify 来存储对象数据
jsON.stringify 可以将对象转换为字符串var?site?=?new?Object; ... var?str?=?JSON.stringify(site);?//?将对象转换为字符串然后再使用 JSON.parse 方法 将 字符串转换 为 JSON 对象
var?site?=?JSON.parse(str);save() 方法
//保存数据?? function?save(){?? ????var?site?=?new?Object; ????site.keyname?=?document.getElementById("keyname").value; ????site.sitename?=?document.getElementById("sitename").value;?? ????site.siteurl?=?document.getElementById("siteurl").value; ????var?str?=?JSON.stringify(site);?//?将对象转换为字符串 ????localStorage.setItem(site.keyname,str);?? ????alert("保存成功"); }find() 方法
//查找数据?? function?find(){?? ????var?search_site?=?document.getElementById("search_site").value;?? ????var?str?=?localStorage.getItem(search_site);?? ????var?find_result?=?document.getElementById("find_result"); ????var?site?=?JSON.parse(str);?? ????find_result.innerHTML?=?search_site?+?"的网站名是："?+?site.sitename?+?"，网址是："?+?site.siteurl;?? }完整的 代码 如下
<div?style="border:?2px?dashed?#ccc;width:320px;text-align:center;"> ????<label?for="keyname">别名(key):</label>?? ????<input?type="text"?id="keyname"?name="keyname"?class="text"/>?? ????<br/>?? ????<label?for="sitename">网站名：</label>?? ????<input?type="text"?id="sitename"?name="sitename"?class="text"/>?? ????<br/>?? ????<label?for="siteurl">网?址：</label>?? ????<input?type="text"?id="siteurl"?name="siteurl"/>?? ????<br/>?? ????<input?type="button"?onclick="save()"?value="新增记录"/>?? ????<hr/>?? ????<label?for="search_site">输入别名(key)：</label>?? ????<input?type="text"?id="search_site"?name="search_site"/>?? ????<input?type="button"?onclick="find()"?value="查找网站"/>?? ????<p?id="find_result"><br/></p>?? </div>范例中的 loadAll 输出 了所有存储的数据，我们需要确保 localStorage 存储的数据都为 JSON 格式，否则 JSON.parse(str) 将会报错。
HTML5 Web SQL 数据库 ? ?HTML5 语义元素声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92363