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

Posted 2020-07-01

一、两个存储系统

两个存储系统

    - 万维网最初的设想，是作为展示信息的一种方式。信息处理是后来才出现的，但是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)

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