1.Cookie
- 简介
Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息
Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie
Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对 - 基本操作
通过访问document.cookie可以对cookie进行创建，修改与获取。
默认情况下，cookie 在浏览器关闭时删除，你还可以为 cookie的某个键值对 添加一个过期时间
如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中
可以在浏览器查看cookie的信息
- 封装操作cookie的函数
设置cookie的函数：设置cookie的过期时间不方便，可以为其封装一个函数
读取cookie的函数：cookie是以键值对的形式存在的，但是通过document.cookie获取到的是一个字符串，每个cookie键值对在这个字符串中以 ";" 分隔，可以以此对字符串进行分割
-
<script> -
// 设置cookie -
document.cookie = "username=orochiz" -
document.cookie = "age=20" -
// 读取cookie -
var msg = document.cookie -
console.log(msg) // username=orochiz; age=20 -
// 添加过期时间（单位：天） -
var d = new Date() // 当前时间 2019-9-25 -
var days = 3 // 3天 -
d.setDate(d.getDate() + days) -
document.cookie = "username=orochiz;"+"expires="+d -
// 删除cookie （给某个键值对设置过期的时间） -
d.setDate(d.getDate() - 1) -
console.log(document.cookie) -
</script>
-
<script> -
// 设置cookie的函数 (过期时间以 天 为单位) -
function setCookie(key,val,days){ -
// 获取当前时间 -
var d = new Date() -
// getDate()返回月份的某一天 setDate()设置一个月的某一天 -
// 将当前时间设置为3天后 -
d.setDate(d.getDate() + days) -
// 设置cookie -
document.cookie = `${key}=${val};expires=${d}` -
} -
// 获取cookie的函数 -
function getCookie(cname){ -
// 将cookie字符串分割成数组 -
var arr = document.cookie.split(";") -
var name = cname + "=" -
// 遍历所有的键值对，查找目标键值对 -
for(var i=0;i<arr.length;i++){ -
if(arr[i].startsWith(name)){ -
return arr[i].substring(name.length) -
} -
} -
// 没有相关的cookie则返回null -
return null -
} -
setCookie("username","空白",2) -
console.log(getCookie("username")) //空白 -
console.log(getCookie("age")) //null -
</script>
2.localStorage和sessionStorage
localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除
localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信
localStorage，sessionStorage可使用的API都相同
setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值
-
<script> -
// 添加数据 -
window.localStorage.setItem("name","张三") -
window.localStorage.setItem("age",20) -
window.localStorage.setItem("gender","男") -
// 获取数据 -
console.log(window.localStorage.getItem("name")) // 张三 -
// 清除某个数据 -
window.localStorage.removeItem("gender") -
// 清空所有数据 -
window.localStorage.clear() -
</script>
在浏览器中可以看到已经存储的值
-
<script> -
// 添加数据 -
window.sessionStorage.setItem("name","李四") -
window.sessionStorage.setItem("age",18) -
// 获取数据 -
console.log(window.sessionStorage.getItem("name")) // 李四 -
// 清除某个数据 -
window.sessionStorage.removeItem("gender") -
// 清空所有数据 -
window.sessionStorage.clear() -
</script>
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
-
<script> -
// 添加数据 -
window.localStorage.setItem("name","李四") -
window.localStorage.setItem("age",18) -
var storage = window.localStorage; -
// 遍历数据 -
for(var i=0, len=storage.length; i<len;i++){ -
var key = storage.key(i); -
var value = storage.getItem(key); -
console.log(key + "=" + value); -
} -
</script>
3.应用程序缓存
先说说浏览器的常规缓存
浏览器上网时会产生临时的缓存文件，但是每个浏览器的表现却不一样。
例如我有个css文件，一开始设置字体为 黑色，先用浏览器访问一遍，此时浏览器的字体渲染成黑色。接着我在服务器端修改这个css文件，设置字体为 红色，这时浏览器的差异就出现了，ie和火狐刷新页面后页面字体的颜色为红色。而chrome怎么刷新都是 黑色 ，新建标签页甚至在新窗口打开都是一个样，除非手动清空缓存或者关闭浏览器在重新开才能将页面字体渲染成最新的红色。
我为什么要说这个，因为下面所说的涉及应用程序缓存，为了避免出现不必要的麻烦，必须先理清楚，某个页面的缓存是我自己设定的，还是浏览器默认的结果。
前面说了，一旦浏览器关闭，在重新访问页面时，所有的资源都会重新从网络中获取。而我们希望将其中的一些静态资源文件存放在用户的电脑上，每次访问这个页面时，这个静态资源文件就直接从本地读取，而不是每次都从服务器下载，这样不仅可以节省宽带，减轻服务器负担，而且加载的速度更快。
应用程序缓存就是为解决这个问题而生的
比如我有一个页面：
-
<!DOCTYPE html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<link rel="stylesheet" href="./index.css"> -
<script src="./index.js"></script> -
<title>Test</title> -
</head> -
<body> -
<p>我是p标签</p> -
</body> -
</html>
这个页面共有2个资源文件，分别是index.css和index.js，这2个文件的代码如下
-
/* index.css */ -
p{ -
color: green; -
}
-
// index.js -
console.log("hello world")
我希望每次访问页面，css文件都使用本地缓存过的，而js文件每次都从网络获取。何如将我的意图告诉浏览器呢？
首先，要建立一个appcache文件，用来告诉浏览器哪些文件直接从本地获取，哪些文件要从网络下下载，例如 demo.appcache
-
CACHE MANIFEST -
CACHE: -
/index.css -
NETWORK: -
* -
FALLBACK:
CACHE - 在此标题下列出的文件将在首次下载后进行缓存，之后每次都直接从缓存中读取
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
结合上面的例子，意思就是index.css文件要缓存，除了它以外的文件都从网络中获取，当前这个页面我们只有2个文件，所以也就是指index.js每次都要从网络中获取
接着要引入这个文件，在html标签中添加manifest属性，值就是appcache文件的路径，它表示让浏览器按这个文件的规则去缓存相应的文件
-
<!DOCTYPE html> -
<html lang="en" manifest="demo.appcache"> -
... -
</html>
下一步访问页面（推荐IE11及以上版本），初次访问字体为绿色，控制台打印了 hello world
接着我们修改服务器中的index.css和index.js
/* index.css */
p{
color: red;
}
// index.js
console.log("今天星期一")
-
再次刷新页面，或者关闭浏览器后再从新打开页面 -
 -
字体颜色没有发生改变，而控制台打印的内容已经由 hello world 变成 今天星期一，说明我们的目的达到了 -
可能出现的问题： -
如果用户手动清空缓存，或者设置了关闭浏览器时自动清空缓存，那么下次打开页面就只能从网络中下载，因为缓存已经被清空了。 -
chrome浏览器中由2套缓存，即缓存和应用缓存，只要你在html标签中声明了manifest，那么所有的文件都会被缓存，包括已经在NETWORK中声明的文件，只是NETWORK中声明的文件存储在缓存中，而CACHE声明的文件存储在应用缓存中 -
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
