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

JavaScript HTML5本地存储

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

本地存储

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本地存储

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库