Web存储

传统的方式是使用document.cookie来进行存储，但是由于其存储空间有限（大约4KB），并且需要复杂的操作来解析，给开发者带来了诸多不便。

为此，HTML 5规范提出了网络存储的相关解决的方案，即Web Storage（Web存储）和本地数据库Web SQL Database。

Web Storage API

关键对象

window.sessionStorage对象用于区域存储；
window.localStorage对象用于本地存储。

特点

数据的设置和读取比较方便。
容量较大，sessionStorage大约为5MB，localStorage大约为20MB。
只能存储字符串，若想要存储JSON对象，则可以使用window.JSON.stringify()或者parse()进行序列化和反序列化编码

优势

减少网络流量的使用。
使用Web Storage，一旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递。
能够快速显示数据。
使用Web Storage性能好，因为从本地读数据比通过网络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上网页本身也可以有缓存，因此如果整个页面和数据都在本地，则可以立即显示。
可以临时存储数据

在很多时候，数据只需要在用户浏览一组页面期间使用，而关闭窗口后数据就可以丢弃。这种情况使用sessionStorage非常方便。

方法属性

由于sessionStroage对象和localStorage对象都是Storage的实例，所以都可以使用Storage接口提供的方法和属性。Web Storage接口中提供了一些方法和属性，如表所示。

方法/属性	描述
key(n)	该方法用于返回存储对象中第n个key的名称
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值
removeItem(key)	该方法删除键名为key的存储内容
clear()	该方法清空所有存储内容
length	该属性返回Storage存储对象中包含的item的数量

sessionStorage

sessionStorage主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。session就是会话的意思，比如现实生活中，打电话时从拿起话筒拨号到挂断电话之间的一系列过程可以称为一次会话。在Web开发中，一次会话是指一个浏览器窗口从打开到关闭的过程。如果关闭浏览器，那么会话就将结束。sessionStorage的数据是保存在浏览器的内存中的。当浏览器关闭后，内存将被自动清除。

sessionStorage中存储的数据只在当前浏览器窗口有效。如果只想将数据保存在当前会话中，可以使用 sessionStorage 属性。

localStorage

localStorage作为HTML5 Web Storage的API之一，主要作用是本地存储。localStorage可以将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化保存。

localStorage的优势在于拓展了Cookie的4 KB限制，并且可以将第一次请求的数据直接存储到本地。其容量相当于一个5 MB大小的数据库。相比于Cookie会在每个请求头中发送，localStorage不会在请求头中发送，可以节约带宽。

区别localStorage和sessionStorage

localStorage与sessionStorage唯一的区别就是存储数据的生命周期不同。locaStorage 是永久性存储，而sessionStorage的生命周期与会话保持一致，会话结束时数据消失。从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取。而sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除。 localStorage在使用中也有一些局限，具体如下。

检查浏览器对该API支持情况

    <script>

        if (window.sessionStorage) {

            // 浏览器支持sessionStorage

        } else if (window.localStorage) {

            // 浏览器支持localStorage

        }

    </script>

实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input type="text" id="username">

    <button id="setData">设置数据</button>

    <button id="getData">获取数据</button>

    <button id="delData">删除数据</button>

    <script>

        var username = document.querySelector('#username');

        // 单击“设置数据”按钮，设置数据

        document.querySelector('#setData').onclick = function () {

            var val = username.value; // 获取username里面的值

            window.sessionStorage.setItem('username', val);

        };

        // 单击“获取数据”按钮，获取数据

        document.querySelector('#getData').onclick = function () {

            alert(window.sessionStorage.getItem('username'));

        };

        // 单击“删除数据”按钮，删除数据

        document.querySelector('#delData').onclick = function () {

            window.sessionStorage.removeItem('username');

        };

        if (window.sessionStorage) {

            // 浏览器支持sessionStorage

        } else if (window.localStorage) {

            // 浏览器支持localStorage

        }

    </script>

    </script>

</body>

</html>

上面的存储方式，仅仅在一个会话中有效。会话结束后，数据则会被清除

下面这个方式存储。只要不主动清除，长期有效



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input type="text" id="username">

    <button id="setData">设置数据</button>

    <button id="getData">获取数据</button>

    <button id="delData">删除数据</button>

    <script>

        var username = document.querySelector('#username');

        // 单击“设置数据”按钮，设置数据

        document.querySelector('#setData').onclick = function () {

            var val = username.value; // 获取username里面的值

            //window.sessionStorage.setItem('username', val);//一个会话，关闭网页后，数据不会保存

            window.localStorage.setItem('username',val)//只要不主动清除，一直都在

        };

        // 单击“获取数据”按钮，获取数据

        document.querySelector('#getData').onclick = function () {

            // alert(window.sessionStorage.getItem('username'));

            alert(window.localStorage.getItem('username'))

        };

        // 单击“删除数据”按钮，删除数据

        document.querySelector('#delData').onclick = function () {

            // window.sessionStorage.removeItem('username');

            window.localStorage.removeItem('username')

        };

        if (window.sessionStorage) {

            // 浏览器支持sessionStorage

        } else if (window.localStorage) {

            // 浏览器支持localStorage

        }

    </script>

    </script>

</body>

</html>

【前端】【H5 API】Web存储 Web Storage的更多相关文章

Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
Web存储(Web Storage)介绍
Web存储即在客户端存储数据. 在没有Web Storage之前,是通过cookie来在客户端存储数据的.但是由于浏览器能存cookie数比较少.如IE8,Firefox,opera每个域可以保存的 ...
HTML5——web存储 Web SQL 数据库应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...
Web存储-Web Storage
/* // 如下是initStorageEvent()方法参数,其中两个参数我默认写成false了,一般都不用改动 initStorageEvent(eventType, false, false, ...
【我的前端自学之路】【HTML5】web 存储
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...
HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
web 存储方式汇总：Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage
1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...
使用Web存储API存取本地数据
使用Web存储API TODO:本文由赤石俊哉翻译整理,您可以将本文自由地用于学习交流.如需用于其他用途请征得作者的同意. 原文链接:Using the Web Storage API - Moz ...
关于web开发前端h5框架的选择
关于web开发前端h5框架的选择看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

随机推荐

ARMv8 寄存器
本文主要介绍 Armv8/v9 指令集架构中常用部分,详细的还是要看 Arm architecture reference manual. ARMv8 架构 ARMv8 架构支持3种指令集: T32, ...
封装JWT - 生成 jwt 和解析 jwt
1. ASP.NET Core 身份验证和授权验证的功能由Authentication,Authorization中间件提供 :app.UseAuthentication(),app.UseAutho ...
7.flask 源码解析：session
目录一.flask 源码解析:session 1.1 session 简介 1.2 解析 1.2.1 请求过程 1.2.2 session 对象 1.2.3 签名算法 1.2.4 应答过程 1.3 ...
关于使用plsql操作oracle的一点小技巧和几个常用的查询语句
plsql是什么: 就是这个,专门操作oracle的一个工具,好用还免费. 创建一个测试表: create table Student( Id number not null, Name varcha ...
基于 KubeSphere 的运管系统落地实践
作者:任建伟,某知名互联网公司云原生工程师,容器技术信徒,云原生领域的实践者. 背景介绍在接触容器化之前,我们团队内部的应用一直都是基于虚拟机运管,由开发人员自行维护. 由于面向多开发部门服务,而开 ...
python 爬虫如何爬取动态生成的网页内容
--- 好的方法很多,我们先掌握一种 --- [背景] 对于网页信息的采集,静态页面我们通常都可以通过python的request.get()库就能获取到整个页面的信息. 但是对于动态生成的网页信 ...
0.1 Introduction to the tenth anniversary edition
此序作于2010年 1970s&1980s, 除了将量子系统仅仅视为一种自然界中需要解释的现象,大家开始将其视为可以设计的系统. 这种新的观点引起了物理,计算机科学和信息理论等领域交叉融合之后 ...
nano编辑器保存退出
nano的编辑器保存推出使用 ctrl x 然后提示Y N 是否保存写入,输入Y即可然后再Enter 确认就可以了
(Redis基础教程之十) 如何在Redis中运行事务
介绍 Redis是一个开源的内存中键值数据存储.Redis允许您计划一系列命令,然后一个接一个地运行它们,这一过程称为_transaction_.每个事务都被视为不间断且隔离的操作,以确保数据完整性. ...
(Redis基础教程之八) 如何在Redis中管理Sets
如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端如何在Redis中管理字符串如何在Redis中 ...

【前端】【H5 API】Web存储 Web Storage