通过代码示例跟我学html5相关技术——html5本地存储技术及应用实例

通过代码示例跟我学html5相关技术——html5本地存储技术及应用实例内容摘要：

em()函数删除指定名称的数据值 但如果指定名称的 key 所对应的数据项目并不存在，则 removeItem()函数什么都不做。 如下的代码示例： (39。 keyName39。 )。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 6/13 页 6 当然，如果希望一次性清除所有的名称的键值对数据时，可以使用 ()函数（如果列表本来就是空的就什么都不做）。 （ 5）本地存储中的数据只能为字符串类型 由于目前通过 localStorage 对象中的 getItem()、 setItem()函数所实现的本地存储中的数据只能为字符串类型，尽管 setItem(key,value)函数中的 value 的数据类型在理论上可以是任意类型，不过实际上浏览器会调用 value 中的 toString()函数获取其字符串值并存储到本地。 因此如果是自定义的数据类型（如对象类型），则需要开发人员在相关的对象中自定义toString()函 数以返回目标数据值或者将数据转换为 JSON 字符串进行存储，然后再将所获得的 JSON 字符串进行数据格式的转换。 应用 HTML5 本地存储技术实现的页面访问计数器的应用示例 （ 1）页面示例 !DOCTYPE html html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 本地存储的应用示例 /title /head body div id=showVisitCounterTagID/div /body script type=text/javascript if (!(totalVisitCounter)){ (totalVisitCounter,0)。 } /** 必须要应用 parseInt 函数进行格式转换获得具体的数据值 ，因为 HTML5 本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。 */ 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 7/13 页 7 = parseInt( (totalVisitCounter)) + 1。 (showVisitCounterTagID).innerHTML = 本页面已经被访问了 + +次。 /script /html 本示例在 IE9 中没有任何的结果，但在 Google Chrome 浏览器中可以见到结果，并且点击浏览器的“刷新”按钮，页面中的计数器值不断地递增。 （ 2）本地存储中的数据对同源的页面文档具有可见性 由于浏览器的同源策略，网络连接的跨域访问是不被允许的。 而所谓的同源是指：规则（协议）、主机号（域名、 IP 地址等）和端口号、浏览器都相同。 因此，如果在同一台客户端机器中打开两个 Google Chrome 浏览器并访问同一个 URL地址，在任何一个页面上创建的本地存储中的数据对另外一个页面也是可见的。 （ 3）本地存储中的数据对不同源的页面文档具有不可见性 但是如果继续在同一台机器中使用其它的浏览器（如 Firefox）打开相同 URL 的地址页面，此时的本地存储中的数据将是不可见的，因为此时由于是两种不同的浏览器，因此是不同源的访问。 （ 4）思考 如果将示例中的 localStorage 改变为 sessionStorage，然后再进行相同的测试，将会有什么不 同的结果。 在 Google Chrome 浏览器中查看本地存储的数据 许多浏览器提供浏览本地存储中的数据的功能，可以在这些浏览器中直接查看页面脚本程序所创建的各个本地存储中的数据。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 8/13 页 8 首先点击浏览器右端的按钮 ，然后在弹出的快捷菜单中的“工具”菜单内打开“ JavaScript 控制台”子菜单。 切换到“ Resources” 页，在左边的树形节点中找到“ Local Storage”节点，点击其中的 Key 键名为 totalVisitCounter 的本地存储的变量及对应的值。 应用 HTML5 本地存储技术实现网页便利贴的应用示例 （ 1）页面代码 html head 杨教授工作室 精心创作的优。