本地存储 管理科学与工程学科 耿方方
本地存储 管理科学与工程学科 耿方方
主要内容 本地存储 Web Storage IndexedDB Cookie 案例:使用本地数据提升服务器性能
主要内容 本地存储 Web Storage IndexedDB Cookie 案例：使用本地数据提升服务器性能
1、本地存储 1.1本地存储简介 客户端本地存储数据即浏览器存储数据。 从HTM4中已经存在的 Cookie存储机制到HM5的 Web Storage存储 机制和本地数据库,目前本地存储技术主要由 Web Storage、本地数 据库和 Cookie组成。 本地存储技术让永久数据管理这一完全由服务器端执行的工作也能 够在客户端得以实现,从而大大减轻了服务器端的负担,加快访问 速度
1、本地存储 1.1本地存储简介 客户端本地存储数据即浏览器存储数据。 从HTML4中已经存在的Cookie存储机制到HTML5的Web Storage存储 机制和本地数据库，目前本地存储技术主要由Web Storage、本地数 据库和Cookie组成。 本地存储技术让永久数据管理这一完全由服务器端执行的工作也能 够在客户端得以实现，从而大大减轻了服务器端的负担，加快访问 速度。
1、本地存储 1.2本地存储类型 Web Storage Web Storage把网站中有用的信息存储到本地,然后根据实际需要从 本地读取信息。 主要分为 Session Storage和 Local Storage两种类型,其功能和用 法基本上是相同的,只是保存数据的生存期限不同
1、本地存储 1.2本地存储类型 Web Storage Web Storage把网站中有用的信息存储到本地，然后根据实际需要从 本地读取信息。 主要分为Session Storage和Local Storage两种类型，其功能和用 法基本上是相同的，只是保存数据的生存期限不同。
1、本地存储 1.2本地存储类型 Storage对象的属性和方法具体如下所示。 ■ length:返回当前 Storage对象里保存的键/值对数量。 key( index):该方法返回 Storage中第 index个键(key)的名称。 ■ getItem(key):该方法返回指定key对应的当前值。 setTer(key, value):该方法首先检测指定的键/值对的键是否已存在于当前键/值 对列表。 removeltem(key):该方法从 Storage对象键/值对列表中删除指定键对应的数据项。 clear0:当前 Storage对象键/值对列表中有数据项时,清空键/值对列表
1、本地存储 1.2本地存储类型 Storage对象的属性和方法具体如下所示。 length：返回当前Storage对象里保存的键/值对数量。 key(index)：该方法返回Storage中第index个键（key）的名称。 getItem(key)：该方法返回指定key对应的当前值。 setItem(key,value)：该方法首先检测指定的键/值对的键是否已存在于当前键/值 对列表。 removeItem(key)：该方法从Storage对象键/值对列表中删除指定键对应的数据项。 clear()：当前Storage对象键/值对列表中有数据项时，清空键/值对列表
1、本地存储 1.2本地存储类型 本地数据库 本地数据库是HTM提供的浏览器端数据库,可以在客户端存储大量 结构化数据并直接通过 JavaScript API高效检索,主要有 Web SQL与 IndexedDB两种类型。 WebS哑L是一种运行于浏览器的关系数据库。可以通过SL语句执行数据的插入或检 索等操作。 ■ IndexedDB是一种索引数据库,是一个不断发展中的网络标准,这个标准用于在浏览 器中存储大量结构化的数据,并提供索引以保证高效率的查询
1、本地存储 1.2本地存储类型 本地数据库 本地数据库是HTML提供的浏览器端数据库，可以在客户端存储大量 结构化数据并直接通过JavaScript API高效检索，主要有Web SQL与 IndexedDB两种类型。 Web SQL是一种运行于浏览器的关系数据库。可以通过SQL语句执行数据的插入或检 索等操作。 IndexedDB是一种索引数据库，是一个不断发展中的网络标准，这个标准用于在浏览 器中存储大量结构化的数据，并提供索引以保证高效率的查询
1、本地存储 1.2本地存储类型 Cookie Cookie是HM4中已经存在的本地存储机制,多用于网站辨识用户身 份、进行 session跟踪而储存在用户本地终端上,以key- value形式 进行存储数据,浏览器存储 Cookie大小\有限
1、本地存储 1.2本地存储类型 Cookie Cookie是HTML4中已经存在的本地存储机制，多用于网站辨识用户身 份、进行session跟踪而储存在用户本地终端上，以key-value形式 进行存储数据，浏览器存储Cookie大小有限
2、 Web Storage 2.1 session Storage 数据存储的实现 sessionStorage是 Storage对象的一个实例,浏览器中会话级别的 WebStorage,对应 Windows对象 sessionStorage属性。 W3C组织为 sessionStorage制定的接囗定义如下所示。 [ Nolnterfaceobject interface WindowSession Storage readonly attribute Storage sessionStorage Window implements Window Session Storage
2、Web Storage 2.1 sessionStorage 数据存储的实现 sessionStorage是Storage对象的一个实例，浏览器中会话级别的WebStorage，对应 Windows对象sessionStorage属性。 W3C组织为sessionStorage制定的接口定义如下所示
2、 Web Storage 2.1 session Storage 数据存储的实现 案例21-01: sessionStorage示例演示程序 存储筒单数据 function saveSimpleString0 I var xsl=document. getElementById(zs") sessionStorage, setItem(" course’,"eb前端技术开发与实践 xs1 value=se torage getItem( course) document. write (xsl value) 存储结构化教据 function saveStructuredData0 I var studentInfo =[ arsenUm " coursenum":"1","nme":“姓名”], " courseNum":"2,"nme":“性别”], essionStorage. setItem("studentInfo, JSON. stringify(studentInfo))
2、Web Storage 2.1 sessionStorage 数据存储的实现 案例21-01：sessionStorage示例演示程序 //存储简单数据 function saveSimpleString() { var xs1=document.getElementById("xs"); sessionStorage.setItem("course", "Web前端技术开发与实践"); xs1.value=sessionStorage.getItem("course"); document.write(xs1.value); } //存储结构化数据 function saveStructuredData() { var studentInfo = [ { "courseNum": "0", "name": "学号" }, { "courseNum": "1", "name": "姓名" }, { "courseNum": "2", "name": "性别" }, ] sessionStorage.setItem("studentInfo", JSON.stringify(studentInfo)); }
2、 Web Storage 2.1 session Storage 创建数据项 sessionStorage和 localStorage都将数据存储为项,项采用键/值组合的格式,每个 值在存储前都要转化为字符串, sessionStorage继承 Storage对象。 sessionStorage创建数据项使用 setItem(方法,具体如下所示。 创建数据项,存储简单字符串。 ∥存储简单数据 session Storage. setltem" course","web前端技木开发与实践
2、Web Storage 2.1 sessionStorage 创建数据项 sessionStorage和localStorage都将数据存储为项，项采用键/值组合的格式，每个 值在存储前都要转化为字符串，sessionStorage继承Storage对象。 sessionStorage创建数据项使用setItem()方法，具体如下所示。 创建数据项，存储简单字符串
