浏览器存储
浏览器给前端开发人提供了存储数据。
作用:实现数据持久化存储。可以实现数据的共享
url传参
- location.href 跳转链接并拼接下一个页面需要的参数
- 在两一个页面中location.href获取页面信息,并对`?`后面参数进行格式化处理
- 最后使用格式化后的参数。
数据持久化存储locaStorage
为什么需要locaStorage
只要浏览器中数据需要持久化存储都可以使用localStorage
1:大小5M
2: 需要使用ap才能删除数据
3:应用
存储登录成功后,接口返回的数据。用该数据判断是否登录
页面中不需要频繁更新的数据,可以存在locaStorage中。用于较少http请求次数提高性能
例如:首页第一次获取商品列表数据,
例如:记住密码
例如:存储浏览器记录等
locaStorage api:
localStorage.getItem()
localStorage.setItem()
localStorage.removeItem()
localStorage.clear()
locaStorage api:
<!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 id="delet">删除数据</button>
<button id="clear">清空</button>
<script>
delet.onclick = function(){
// 删除某一条数据
localStorage.removeItem('token')
}
clear.onclick = function(){
// 清空
localStorage.clear()
}
</script>
</body>
</html>
cookies
cookies 只是为了用户信息存在的,不存储浏览器中其他数据
4kb
存储用户登录信息(一般是服务端自动存储的)
数据持久化存储 indexDB
为什么需要indexDB
因为locaStorage 不满足所有数据存储。如果数据量超过5M locaStorage 不能解决
indexDB 数据库;可以创建数据库
一个数据库下游多个表
一个表中有很多字段
一个表中可以存储很多数据
indexDB是什么?
浏览器数据库:异步存储的数据。存在操作indexDB的事件监听
indexDB解决了什么问题?
普通的列表可以使用locaStorage解决。如果 3d效果,大量数据 5M太小了 例如:three.js D3.js 画的一个模型;有的是 几十兆 几十兆的数据对于一般的服务器来说加载速度特别慢,为了解决加载速度慢问题。我们通过本地存储解决。
-
大小超过240M
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>
<h1>indexDB</h1>
<script>
// 第一步: 打开页面必须要有服务 liveServer
// 第二步:打开数据库(没有会自动创建),数据库可以有多个
var dbName = 'haoJing'; // 数据库名
var version = 1; // 版本好
var storeName = 'haoJingStore'; // 表名
var indexDB = window.indexedDB; // 获取数据库实例对象
console.log(indexDB);
/**
* indexedDB.open(name,version) 打开数据库
* 返回值:实例对象
* 数据打开;读取 异步
*/
var request = indexDB.open(dbName,version) // 打开数据库
console.log(request);
var db = null; // 保存数据库中数据
// 当数据库创建或者升级的时候会触发
request.onupgradeneeded = function(e){
console.log('当数据库创建或则升级是后触发 version变更触发');
db = e.target.result;
// 创建表
var objectStore = db.createObjectStore(storeName,{
keyPath:'id'
})
// var store = db.createObjectStore('student',{
// keyPath:'id'
// })
}
// 数据库打开成功时候触发
request.onsuccess = function(e){
console.log('数据库打开成功',e);
console.log('获取数据库对象',e.target.result);
db = e.target.result;
}
// 数据库打开失败触发
request.onerror = function(){
console.log('打开数据库失败');
}
</script>
</body>
</html>
临时存储 sessionStorage
当浏览器关闭时候,数据自动删除 只要是关闭浏览器之前,需要持久存储数据。
5M
浏览器关闭自动删除数据
应用:与locaStorage差不多
api
sessionStorage.getItem()
sessionStorage.setItem()
sessionStorage.removeItem()
sessionStorage.clear()
sessionStorage:
<!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>
<!--
1: 数据需要请求服务器获取的,
2:有了数据后才能存
因为获取数据比正常代码执行慢,所以存的代码也不正常代码慢
执行慢的代码异步代码;执行快的同步代码
-->
<button>异步本地存储商品列表</button>
<script src="../../plugin/jquery.js"></script>
<script>
$('button').click(function(){
$.ajax({
url: 'http://49.232.47.192:9527/api/goodList',
method:'get',
data:{
page:1
},
success:function(data){
console.log(data);
// JSON.stringify(data) 将对象变为json字符串
data = JSON.stringify(data);
console.log(data);
sessionStorage.setItem('shoplist',data)
}
})
})
// 2测试浏览器关闭 数据自动删除
</script>
</body>
</html>
浏览器中数据源头
1:静态的。自己本地创建数组
2:服务端返回的 json数据。主流