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

随机推荐

墨天轮访谈 | SelectDB 衣国垒：Apache Doris（incubating）1.0版本特性解析与未来规划
分享嘉宾:衣国垒 Apache Doris Committer.SelectDB 联合创始人&CTO 整理:墨天轮社区导读大家好,我是来自Apache Doris社区的衣国垒,也是Sele ...
nicegui太香了，跨平台开发和跨平台运行--使用Python+nicegui实现系统布局界面的开发
在现今国产化浪潮的驱动下,跨平台或者缩小范围说基于国产化Linux或者基于国产鸿蒙系统的开发才是未来的趋势了,风口浪尖上,我们开发人员也只能顺势而为,本篇随笔介绍在Python开发中,使用使用Pyth ...
KubeSphere 部署向量数据库 Milvus 实战指南
作者:运维有术星主 Milvus 是一个为通用人工智能(GenAI)应用而构建的开源向量数据库.它以卓越的性能和灵活性,提供了一个强大的平台,用于存储.搜索和管理大规模的向量数据.Milvus 能够执 ...
云原生周刊：Meshery v0.70 发布｜ 2024.1.22
开源项目推荐 flux-cluster-template 该项目用于部署由 Flux.SOPS.GitHub Actions.Renovate.Cilium 等支持的 Kubernetes 集群,专注 ...
git安装使用及连接gitlab集成idea
一.简介 Git是一个开源的分布式版本控制系统,通过git可以对项目进行代码托管,通常配合GitLub.Github使用: 想了解更多请进官网(官网下载较慢):https://www.git-scm. ...
电脑端 itunes 备份保存路径修改方法
默认在c盘,重做系统就会丢失. 1.先删除C:\Users\你的用户名\AppData\Roaming\Apple Computer里的 MobileSync文件夹(首次安装iTunes没有,要先运行 ...
2.14 Linux文件目录结构一览表
学习 Linux,不仅限于学习各种命令,了解整个 Linux 文件系统的目录结构以及各个目录的功能同样至关重要. 使用 Linux 时,通过命令行输入 ls -l / 可以看到,在 Linux 根目录 ...
CF1487-B Cat Cycle
一个规律题目要多做多积累 , 脑子不太灵活 CF1487 Cat Cycle 题目大意: 两只猫A,B, A猫从n -> n-1 -> n-2 ... -> 1 -> 2 .. ...
融合虚拟与现实，AR Engine为用户提供沉浸式交互体验
当今的应用市场中,传统的应用产品已经难以完全满足消费者的多样化需求.为了在竞争激烈的市场中脱颖而出,企业需要深入洞察用户需求,提供个性化的服务体验和差异化的产品创新,以吸引并留住消费者. 比如,购物类 ...
【原创】PREEMPT-RT 系统cpu使用率周期CPU飙高问题
PREEMPT-RT 系统cpu使用率周期CPU飙高问题目录 PREEMPT-RT 系统cpu使用率周期CPU飙高问题背景现象复现条件原因解决措施背景在22年进行PREEMPT-RT系 ...

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