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

随机推荐

将python文件编译成exe文件
第一种方法:我们只会生成一个exe文件,因为所有的库文件他都会包含在这个exe文件中 1.安装:pyinstaller pip install pyinstaller 2.使用如下命令编译 pyins ...
pytorch: grad can be implicitly created only for scalar outputs
运行这段代码 import torch import numpy as np import matplotlib.pyplot as plt x = torch.ones(2,2,requires_g ...
C# 的显示转换 *.Parse(string) Convert.ToInt32(double value)
// 显式转换 (类型) /// (int)表示使用强制的显示转换,是一种类型转换,C#默认的整形是 int32 , /// 因此使用此方法转成int32 不遵循四舍五入,直截取整数部分 /// (i ...
ORM底层逻辑
1 数据库必然是只认识Sql语句 2 ORM的底层必然是ADO.NET 3 ORM也可以说是ADO的一种封装 ORM: 1 通过实体生成Sql语句-大量的反射 2 对应映射关系
spring boot 向nacos注册方式，以及遇见的报错（boot！boot! 不是cloud！）
一.首先添加nacos注册发现的pom依赖 <dependency> <groupId>com.alibaba.boot</groupId> <artifac ...
浅谈 K-D Tree 及其进阶应用
前言 \(\text{K-D Tree (K-Dimension Tree)}\) 是一种可以有效处理高维信息的数据结构. 在一般信息学竞赛题目中 \(k = 2\),此时它又称 \(\text{2- ...
在 KubeSphere 中开启新一代云原生数仓 Databend
作者:尚卓燃(https://github.com/PsiACE),Databend 研发工程师,Apache OpenDAL (Incubating) PPMC. 前言 Databend 是一款完全 ...
使用 Cursor 和 Devbox 快速开发并上线 Gin 项目
作为开发者,最让我们头疼的事情是什么?那必须是环境配置.版本控制以及各种部署配置等等繁琐的工作. 想象一下,如果你只需点击几下鼠标,就能拥有一个完全配置好的开发环境,支持从 Java 到 Python ...
FFmpeg 视频转 GIF
Filtergraph 在 ffmpeg 命令中,可以使用 -filter.-vf.-af 或 -filter_complex 选项指定 filter graph Filtergraph 由 filt ...
VMware安装Ubuntu操作系统 2024.9.27
1.安装 Ubuntu的官方网站是:https://www.ubuntu.com/download 点进去可以直接下载文件下载会比较慢,我这点用了约5分钟然后就可以打开vmware,选择: 就可以 ...

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