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

JavaScript HTML5本地存储

zhezhongyun 2025-01-12 20:16 40 浏览

本地存储

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 和word互转?这两个热门库就够了!
下一篇：html5之Localstorage本地存储详解

JavaScript HTML5本地存储

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）