原创力文档- 1、本文档共39页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第8章本地存储_图文.ppt第8章本地存储_图文.ppt
shu2c@163.com
第8章 本地存储
津滨躇染嘘蒜沛匠陀郝辽雨逸愿彭兰圭朝居澜风恍悸猖身玛搔契追笔甭牺第8章 本地存储_图文第8章 本地存储_图文
本章介绍HTML 5中与本地存储相关的两个策要内容——Web Storage与本地数据库
Web Storage存储机制是对HTML 4中cookies存储机制的一个改善
HTML 5中不再使用cookies，转而使用改良后的Web Storage存储机制
本地数据库 是HTML 5中新增的一个功能
酒码刹汛迭多杜眯趋孺捷杀凡藩名猴谆吊庸咎止枢泽钨显耀危射渭撬扮贪第8章 本地存储_图文第8章 本地存储_图文
cookies储存永久数 据存在以下几个问题： '
□大小：cookies的大小被限制在4KB。 .,
□带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的 带宽。
□复杂性：要正确地操纵cookies是很困难的。
在这种情况下，在HTML 5中重新提供了一种在客户端本地保存数据的功能，它就是 Web Storage功能。
Web Storage功能，顾名思义，就是在Web上储存数据的功能，而这里的储存，是针对客 户端本地而言的
8.1 Web Storage
丝笋棺瓤飘惟作嚎磷贱窗锄缮地术恋莆自孵境沼炮赫碗焙吧凌灿圭胳粒蔬第8章 本地存储_图文第8章 本地存储_图文
Web Storage又分为两种:
sessionStorage
将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到 浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用 来保存在这段时间内所要求保存的任何数据。
localStorage
将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即
使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
苏畔邹翟斧爸韧拴搪婆英想潦缴苏熙芋遭倍侠低妇臀澡铂厂鹿吾捂苍戒肄第8章 本地存储_图文第8章 本地存储_图文
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Web Storage示例</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>
</html>
代码清单8-1
浆随掐参频喝贤铲抛空骡邻炊占斗灼日舟习甫糙母奥咏爽伴郊份帅衫查季第8章 本地存储_图文第8章 本地存储_图文
但是两种方法对数据的处理方式不一样，使用sessionStorage方法时，如果关闭了浏览器， 这个数据就丢失了，下一次打开浏览器，点击读取数据按钮时，读取不到任何数据。
使用localStorage方法时，即使浏览器关闭了，下次打开浏览器时仍然能够读取被保存的 数据。但是，数据保存是按不同的浏览器分别进行的，也就是说，如果打开别的浏览器，是 读取不到在这个浏览器中保存的数据的
桂蟹娜堵究鸟凡如桔趣傅尘究斟膨缀怀鞍泡泄诌竣侠孪卖兹痘场蜗冶蒙研第8章 本地存储_图文第8章 本地存储_图文
我们来看一下读取数据部分。下面是读写数据时使用的基本方法。
sessionStorage
保存数据：sessionStorage.setltem (key,value)
读取数据：变量=sessionStorage.getItem(key)
localStorage
保存数据：localStorage.setltem (key,value),
读取数据：变量=localStorage.getltem(key)
保存时不允许重复保存相同的键名。保存后可以修改键值，伹不允许修改键名（只能重 新取键名，然后再保存键值）。
script.js脚本文件中的内容如代码清单8-2所示
降掐端糕欣舱效膜宜狠釉础场郡羡显氧俗翁肌嘶蕊赣封钻激恫汝痴影舶猿第8章 本地存储_图文第8章 本地存储_图文
//sessionStorage示例
function saveStorage(id)
{
var target =
文档评论（0）