认识Storage
WebStorage主要提供了一种机制,可以让浏览器提供一种比cookie更直观的key、value存储方式:
localStorage:本地存储,提供的是一种永久性的存储方法,在关闭掉网页重新打开时,存储的内容依然保留;
sessionStorage: 会话存储,提供的是本次会话的存储,在关闭掉会话时,存储的内容会被清除;
localStorage和sessionStorage的区别
关闭网页后重新打开,localStorage会保留,而sessionStorage会被删除;
在页面内实现跳转,localStorage会保留,sessionStorage也会保留﹔
在页面外实现跳转(打开新的网页),localStorage会保留,sessionStorage不会被保留;
Storage常见的属性和方法
// localStorage和sessionStorage都有这些方法
// 1. setItem 存
localStorage.setItem('name', 'coder')
localStorage.setItem('age', 18)
// 2. length
console.log(localStorage.length);
// 3. key方法
console.log(localStorage.key(0));
// 4. getItem
console.log(localStorage.getItem('age'));
// 5. removeItem 移除某一个
console.log(localStorage.removeItem('age'));
// 6. clear 清空所有
console.log(localStorage.clear());
封装一个工具类函数
class Cache {
constructor(isLocal = true) {
this.storage = isLocal? localStorage : sessionStorage
}
setItem(key, value) {
if(value) {
this.storage.setItem(key, JSON.stringify(value))
}
}
getItem(key) {
const value = this.storage.getItem(key)
if(value) {
return JSON.parse(value)
}
}
removeItem(key) {
this.storage.removeItem(key)
}
clear() {
this.clear()
}
length() {
return this.storage.length
}
}
const localCache = new Cache()
const sessionCache = new Cache(false)
export {
localCache,
sessionCache
}
indexedDB数据库的使用
IndexDB是一种底层的API,用于在客户端存储大量的结构化数据。
它是一种事务型数据库系统,是一种基于JavaScript面向对象数据库,有点类似于NoSQL(非关系型数据库);
IndexDB本身就是基于事务的,我们只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务即可;
<!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>
<button>新增</button>
<button>查询</button>
<button>修改</button>
<button>删除</button>
<script src="./04_indexedDB数据库的使用.js"></script>
</body>
</html>
// 打开数据(和数据库建立连接)
const dbRequest = indexedDB.open('coder') // 有coder数据库就会打开这个,没有就会创建
// 连接失败的回调
dbRequest.onerror = function (err) {
console.log('打开数据库失败~');
}
let db = null
// 连接成功的回调
dbRequest.onsuccess = function (event) {
db = event.target.result
}
// 第一次打开/或者版本发生升级
dbRequest.onupgradeneeded = function (event) {
const db = event.target.result
// 创建一些存储对象
db.createObjectStore('users', { keyPath: 'id' })
db.createObjectStore('ages', { keyPath: 'id' })
}
class User {
constructor(id, name, age) {
this.id = id,
this.name = name
this.age = age
}
}
const users = [
new User(100, 'coder', 19),
new User(101, 'kobe', 19),
new User(102, 'james', 19)
]
// 获取btns 监听点击
const btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
const transaction = db.transaction(['users', 'ages'], 'readwrite')
const store = transaction.objectStore('users')
switch (i) {
case 0:
console.log('点击了新增');
users.forEach(item => {
const request = store.add(item)
request.onsuccess = function () {
console.log(`${item.name}插入成功`);
}
})
transaction.oncomplete = function () {
console.log('添加操作全部完成');
}
break
case 1:
console.log('点击了查询');
// 1.查询方式一(知道主键,根据主键查询)
// const request = store.get(102)
// request.onsuccess = function(event) {
// console.log(event.target.result);
// }
// 2.查询方式二
const request = store.openCursor()
request.onsuccess = function(event) {
const cursor = event.target.result
if(cursor) {
console.log(cursor.key, cursor.value);
cursor.continue() // 继续查询
}else {
console.log('查询完成');
}
}
break
case 2:
console.log('点击了修改');
const updateRequest = store.openCursor()
updateRequest.onsuccess = function(event) {
const cursor = event.target.result
if(cursor) {
if(cursor.key === 101) {
const value = cursor.value
value.name = 'curry'
cursor.update(value) // 修改后再放进去
console.log('修改成功');
}else {
cursor.continue() // 继续查询
}
}else {
console.log('查询完成');
}
}
break
case 3:
console.log('点击了删除');
const deleteRequest = store.openCursor()
deleteRequest.onsuccess = function(event) {
const cursor = event.target.result
if(cursor) {
if(cursor.key === 101) {
cursor.delete() // 当前游标是指向这一项的,不需要传删除的哪一项
console.log('删除成功');
}else {
cursor.continue() // 继续查询
}
}else {
console.log('查询完成');
}
}
break
}
}
}
cookie
Cookie (复数形态Cookies),又称为“小甜饼”。类型为“小型文本文件,某些网站为了辨别用户身份而存储在用户本地终端( Client Side )上的数据。浏览器会在特定的情况下携带上
- cookie来发送请求,我们可以通过cookie来获取一些信息;
Cookie总是保存在客户端中,按在客户端中的存储位置,Cookie可以分为内存Cookie和硬盘Cookie,
- 内存Cookie由浏览器维护,保存在内存中,浏览器关闭时Cookie就会消失,其存在时间是短暂的;
- 硬盘Cookie保存在硬盘中,有一个过期时间,用户手动清理或者过期时间到时,才会被清理;
cookie的生命周期
默认情况下的cookie是内存cookie,也称之为会话cookie,也就是在浏览器关闭时会自动被删除
我们可以通过设置expires或者max-age来设置过期的时间;
expires :设置的是Date.toUTCString0,设置格式是;expires=date-in-GMTString-format
max-age :设置过期的秒钟,;max-age=max-age-in-seconds(例如一年为60*60*24*365)
cookie的作用域∶(允许cookie发送给哪些URL )
Domain :指定哪些主机可以接受cookie
如果不指定,那么默认是 origin,不包括子域名。
如果指定Domain,则包含子域名。例如,如果设置Domain=mozilla.org.,则Cookie 也包含在子域名中(如developer)
Path:指定主机下哪些路径可以接受cookie
例如,设置Path=/docs,则以下地址都会匹配∶
/docs
/docs/Web/
/docs/Web/HTTP
cookie的基本使用
// js直接设置和获取cookie
console.log(document.cookie);
// cookie会在会话关闭时被删除掉
// 设置过期时间就是本地cookie,不设置就是内存cookie
document.cookie = 'name=coder'
document.cookie = 'age=19'
// 设置cookie,同时设置过期时间(默认单位是秒钟)
document.cookie = 'name=coder;max-age=10'
// 缺点
// 1. 将cookie附加到每一次的http请求中。
// 2. 明文传输的 headers、
// 3. cookie验证登录