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 ...

随机推荐

USB硬件特性（速度、名称、供电）
USB传输速度 USB1.0版本,USB LS(Low Speed低速),速度1.5Mbps. USB1.1版本,USB FS(Full Speed全速),速度12Mbps. USB2.0版本,USB ...
abc292[AtCoder Beginner Contest 292] 题解
写点题目转换下心情吧 A-CAPS LOCK 大水题 B-Yellow and Red Card 大水题 C-Four Variables 给定一个数\(N\),问有多少个有序正数数组\((A,B,C ...
什么是SPA页面，它的优缺点？
什么是SPA spa是单页面应用(single page web application),浏览器会一开始就加载所需要的html.css.javascript.一旦页面加载完毕,整个页面就不会因为用户 ...
负载均衡器 OpenELB ARP 欺骗技术解析
作者:大飞哥,视源电子运维工程师,KubeSphere 用户委员会广州站站长,KubeSphere Ambassador. K8S 对集群外暴露服务有三种方式:NodePort,Ingress 和 L ...
ToDesk云电脑开启公测！支持AIGC、高性能渲染等场景，价格低至0.98元
在云计算和人工智能技术飞速发展的今天,云电脑作为一种新型的计算模式,正逐渐改变着传统电脑的使用方式.近日,ToDesk云电脑宣布开启公测,以其支持AIGC(人工智能.大数据.云计算等技术的融合应用). ...
好好的Typora收费了！_2022_01_20
好好的Typora收费了!_2022_01_20 用惯了Typora真的很难再去换别的MarkDown编辑工具了,导出都找不到合适的.1.0以前的不需要验证的版本直接就不能打开了,真是头大. 到处找不 ...
“地表最强”人形机器人亮相：视觉&语音推理能力
Figure 02配备了机载的视觉语言模型(VLM),使其能够进行快速的常识性视觉推理. 相关: https://mbd.baidu.com/newspage/data/landingsuper?co ...
SpringBoot必须掌握的常用注解！
Spring Boot 提供了大量的注解,用于简化配置和加速程序开发. 那么接下来,咱们就一起来看下 Spring Boot 中的常用注解有哪些?及其这些注解的具体使用. 1.Bean相关 @Comp ...
基于Java+SpringBoot+Mysql实现的快递柜寄取快递系统功能实现三
一.前言介绍: 1.1 项目摘要随着电子商务的迅猛发展和城市化进程的加快,快递业务量呈现出爆炸式增长的趋势.传统的快递寄取方式,如人工配送和定点领取,已经无法满足现代社会的快速.便捷需求.这些问题不 ...
Air780E之TCP应用，你了解吗？
一.TCP简介 TCP(TransmissionControlProtocol,传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议.它主要用于在不可靠的网络环境中提供稳定的数据传输 ...

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