本地存储
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") == ""){
}