浏览器存储这块相对简单,这里就不再过多赘述。下面简单列举了一份大纲,一图胜前言吧。

indexedDB 一般我们在项目中用到不算多,下面简单举了个例子,简单演示下它的使用,从例子中我们看到,里面有好多回调,操作起来好繁琐,一点不优雅。假设我们在项目中的真的需要用使用 indexedDB 做数据的存储,推荐使用 localForage (opens new window) 这个库来进行相应操作,具体使用请阅读官方文档,这里不再赘述。
<!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>
<script>
let db,
request,
version = 1
request = indexedDB.open('admin', version)
request.onerror = function(e) {
alert(`Failed to open: ${e.target.errorCode}`)
}
request.onsuccess = function(e) {
db = e.target.result
operate(db)
}
request.onupgradeneeded = function(e) {
db = e.target.result
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', {keyPath: 'username'})
}
}
function operate(db) {
const transaction = db.transaction('users', 'readwrite')
const store = transaction.objectStore('users')
const user = {
username: '007',
name: 'f',
age: 18
}
addOrGet(store, 'add', user)
}
function addOrGet(store, method,value) {
const request = store[method](value)
request.onerror = e => console.log('err msg ->', e.target.error)
request.onsuccess = e => console.log('res', e.target.result)
}
</script>
</body>
</html>