河南中医药大学：《Web前端开发》课程理论教学课件（2017）21.本地存储

本地存储 管理科学与工程学科 耿方方

本地存储 管理科学与工程学科 耿方方

主要内容 本地存储 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()方法，具体如下所示。  创建数据项，存储简单字符串