当前位置：网站首页 > 技术文章 > 正文

JavaScript HTML5本地存储

myzbx 2025-01-03 17:41 22 浏览

本地存储

1 本地存储简介

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前, 这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储, 因为它们由每个对服务器的请求来传递, 这使得 cookie 速度很慢而且效率也不高。

HTML5 使用 JavaScript 来存储和访问数据。

2 语法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后, 数据依然可用。

localStorage 和sessionStorage分别是本地存储和会话存储, 统称本地存储。

存储数据：localStorage.setItem('key','value');

读取数据：localStorage.getItem('key')

删除指定数据：localStorage.removeItem('key');

清空所有数据：localStorage.clear()

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--
本地存储存在自己电脑上了 他不能和服务器交互
一种：本地存储(永久存储不会过期)localStorage
一种：临时会话(页面关闭数据就没了)sessionStorage
统称本地存储
二者的方法一毛一样 咱们只以一个举例子

cookie->可以喝服务器交互 是可以设置过期时间的
-->
<script type="text/javascript">
console.log(localStorage)
console.log(sessionStorage)

//写入东西(随便写,你存储的值)
//localStorage.setItem(key(小卡片),value(你存的包))

localStorage.setItem("key001","梁永灿");
localStorage.setItem("key002","迪丽热巴");
localStorage.setItem("key003","杨颖");
localStorage.setItem("key004","大黄");
localStorage.setItem("key004","小黄");


//读取
console.log(localStorage.getItem("key001"))
//console.log(localStorage)

//删除
localStorage.removeItem("key001");

//全部删除
localStorage.clear()


</script>
</body>
</html>

本地存储数据库会自动的为每一个网站(IP地址)建立一个独立的表格, 在同一个网站(IP地址)下数据是可以共享的, 但是不能跨域。

不能跨浏览器存储, 每个浏览器都有自己的小数据库, Chrome存储的, 火狐看不见。

localStorage是简单的数据库, 没有查询功能, 不能用sql操作, 只能简单的存储、读取k-v对。

sessionStorage 浏览器窗口一旦关闭, 数据就丢失了

localStorage存储的数据, 永远不丢失, 关机, 重启都不会导致数据丢失, 除非清除了浏览器记录

注意: 判断localStorage和sessionStorage是否有数据使用if直接判断

if(localStorage.getItem("key001")){
}

不能使用

if(localStorage.getItem("key001") == ""){
}

HTML5 Web 存储

上一篇：HTML5(三)——Web 本地存储
下一篇：html5之Localstorage本地存储详解

JavaScript HTML5本地存储

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331