chap16本地存储和离线应用.ppt

Storage 接口 interface Storage { Storage 接口 readonly attribute unsigned long length; DOMString? key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear(); }; length:唯一的属性，只读，用来获取storage内的键值对数量。 key：根据index获取storage的键名 getItem：根据key获取storage内的对应value setItem：为storage内添加键值对 removeItem：根据键名，删除键值对 clear：清空storage对象 localStorage和sessionStorage操作 localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等 localStorage和sessionStorage的方法： setItem 存储value 用途：将value存储到key字段 用法：.setItem( key, value) 代码示例： sessionStorage.setItem(key, value); localStorage.setItem(site, js8.in); 也可以通过localStorage.键名和localStorage[键名]的形式访问localstorage数据。 例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据： localStorage.setItem(key, value); localStorage.key = value; localStorage[key] = value; 注：保存时，不允许重复保存相同的键名，保存后可以修改键值，但不允许修改键名 localStorage和sessionStorage操作 getItem获取value 用途：获取指定key本地存储的值 用法：.getItem(key) 代码如下: var value = sessionStorage.getItem(key); var site = localStorage.getItem(site); localStorage和sessionStorage操作 也可以通过localStorage.键名和localStorage[键名]的形式访问localstorage数据。 例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中： var value = localStorage.getItem(key); var value = localStorage.key; var value = localStorage[key]; localStorage和sessionStorage操作 removeItem删除指定key 用途：删除指定key本地存储的值 用法：.removeItem(key) 代码示例： sessionStorage.removeItem(key); localStorage.removeItem(site); localStorage和sessionStorage操作 clear清除所有的key/value 用途：清除所有的key/value 用法：.clear() 代码示例： sessionStorage.clear(); localStorage.clear(); localStorage和sessionStorage操作 2、简单Web留言本 如果要保存的数据量比较大的话，使用上述方法会比较麻烦 简单Web留言本示例，要求： 使用一个多行文本框来输入数据 点击按钮时将文本框中的数据保存到localStorage中 在表单下部放置一个table元素来显示保存后的数据 保存内容时，同时保存当前日期和时间，并将该日期和时间一并显示在p元素中 示例： 3、作为简易数据库使用 如果想要将WebStorage作为数据库来使用的话，需要考虑几个问题： 数据库中的表都分为几列，怎样实现对列的管理 怎样实现数据的检索功能 实现对列的管理，可以使用JSON格式（JavaScript object N