Html5之高级-13 Web存储API (两个存储系统sessionStoragelocalStorage)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html5之高级-13 Web存储API (两个存储系统sessionStoragelocalStorage)相关的知识,希望对你有一定的参考价值。

一、两个存储系统


两个存储系统

    - 万维网最初的设想,是作为展示信息的一种方式。信息处理是后来才出现的,但是Web的实质并没有变---信息在服务器上处理,然后显示给用户。因为系统没有利用计算机资源,所以复杂操作都是在服务器上完成的

    - 对于任何程序来说,能够实现数据存储是必备功能之一,并且在需要的时候能够提供数据。但在过去的Web用户端,没有能够支持数据存储的有效机制

    - cookie曾用来在客户端存储少量信息,但受其性质所限,cookie只能存储一些短的字符串

    - 在 html5中提供了 Web 存储 API,它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储。并在日后使用这些数据。

    - 这个API 可以分成两个部分:

        - 信息必须且只在会话过程中使---sessionStorage

        - 信息必须长期保存且由用户决定时长---localStorage


二、sessionStorage


sessionStorage概述

    - sessionStorage这部分API就像是会话cookie的替代。cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用,而sessionStorage使用单个窗口作为引用,这就意味着,窗口关闭之后,sessionStorage就不能再使用。


创建数据

    - sessionStorage 和 localStorage 都将数据存储为项。项采用键/值对的组合格式

    - 语法:

        - setItem(key,value): 用键和值创建项。如果键已经存在,则更新值,所以也可以用这个方法更新值

        - getItem(key): 指定要获取的项的键,根据键得到对应的值

        // 设置数据

          sessionStorage.setItem(‘uanme‘,‘Naruto‘); 

        // 读取数据

          var name = sessionStorage.getItem(‘uname‘);


读取数据

    - API 提供了更多的方法和属性来操纵项,使得代码变得更有用

    - 属性

        - length: 返回应用程序在存储空间中积累的项的数量

    - 方法

        - key(index):获取指定索引对应的项的键

技术分享


删除数据

    - API 中提供了两个方法可以删除项

        - removeItem(key):根据项的键删除指定项

        - clear(): 清空整个存储空间。每个项都被删除

技术分享


三、localStorage


localStorage概述

    - 在窗口会话期间有一个可靠的系统来存储,在某些情况下可能有用。但是,想在Web上模拟强大的桌面应用程序,则一个临时的数据存储系统就不够用

    - 为了解决这个问题,API提供了另外一个系统,为每个来源保留一个存储系统,并保持信息持久可用---localStorage

    - 利用localStorage,可以保存大量数据,并由用户决定信息是否可用,是否保留

    - localStorage与sessionStorage拥有相同的接口,所以sessionStorage的方法和属性对于localStorage都有效


storage事件

    - 由于localStorage向加载同一程序是打开的每个窗口都提供信息,所以产生了至少两个问题:

        - 各个窗口间如何通信

        - 如何更新当前没有活动或没有得到焦点的窗口信息

    - 为解决以上两个问题,API提供了storage事件

    - storage事件:存储空间每次发生变化时,都会触发这个事件。所以可以通过这个事件通知同一程序的每个窗口

    - 语法:

        - window.addEventListener(‘storage‘,updateNum,false);


总结:本章内容主要介绍了下 HTML5 Web存储API (两个存储系统、sessionStorage、localStorage)

本文出自 “技术交流” 博客,谢绝转载!

以上是关于Html5之高级-13 Web存储API (两个存储系统sessionStoragelocalStorage)的主要内容,如果未能解决你的问题,请参考以下文章

Html5之高级-12 Web Workers(概述 API)

Html5本地存储之Web Storage

Html5之高级-11 拖放API (拖放事件dataTransfer对象setDragImage方法)

Html5之高级-9 HTML5 Two.js(概述入门)

Html5之高级-8 HTML5 SVG(概述元素)

客户端存储之HTML5 web存储