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

随机推荐

66.有没有碰到过数组响应丢失（问的是ref和reactive的用法，什么情况下用）
由于vue3使用proxy,对于对象和数组都不能直接整个赋值. 直接赋值丢失了响应性只有push或者根据索引遍历赋值才可以保留reactive数组的响应性 : 可以使用 toRefs 解决这个问 ...
Nuxt.js 应用中的 close 事件钩子详解
title: Nuxt.js 应用中的 close 事件钩子详解 date: 2024/10/13 updated: 2024/10/13 author: cmdragon excerpt: clos ...
【Azure Cloud Service】使用Key Vault Secret添加.CER证书到Cloud Service Extended Support中
问题描述因为Key Vault的证书上传功能中,只支持pfx格式的证书,而中间证书,根证书不能转换为pfx格式,只能是公钥证书格式 cet 或者 crt,能通过文本工具直接查看base64编码内容. ...
双指针习题：Kalindrome Array
Kalindrome Array 题目链接: Kalindrome Array - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题面翻译对于长度为 \(m\) 的序列 \(b\), ...
centos 安装mbstring（mb_strlen ）
部署onethink框架的时候,检测到mb_strlen未支持, 在网上检索一大堆教程,最多的就是先检测一下需要安装的安装包 yum search php 楼主小白满心欢喜地输入,一对照返回的结果, ...
Java跳出当前的多重嵌套循环的3种解决方法
Java跳出当前的多重嵌套循环的3种解决方法(以双重嵌套为例) 方法一:使用一个布尔型的标记变量flag 1 public static void method1() { 2 boolean flag ...
jetpack1
组合函数 package com.example.myapplication1 import android.os.Bundle import androidx.activity.ComponentA ...
UniswapV2Pair细节
UniswapV2Pair合约是Uniswap V2协议中的核心部分,用于管理流动性池.代币交换.流动性代币的铸造和销毁等操作.以下是对UniswapV2Pair合约中所有主要方法及其参数的详细讲解. ...
Java常见面试真题之中级进阶
前言本来想着给自己放松一下,刷刷博客,突然被几道面试题难倒!java反射的作用于原理?说说List,Set,Map三者的区别?Object 有哪些常用方法?大致说一下每个方法的含义?Java 创建对 ...
如何使用强化学习算法解决贪吃蛇问题（Neural Network Learns to Play Snake）
相关: Neural Network Learns to Play Snake https://github.com/greerviau/SnakeAI/ RL算法是有很多baseline算法的,算法 ...

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