1.cookie
cookie的大小被限制在4KB,以键值对的形式保存的,即key=value的格式。cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能。cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。
cookie可以设置过期时间,若没有设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。
手动查看浏览器cookie以及过期时间(浏览器地址栏输入)。谷歌:chrome://settings/siteData 火狐:about:preferences#privacy
注意:
谷歌浏览器chrome本地调试cookie不生效,不管是使用jquery的cookie插件,还是js原生态的cookie方法都不生效。
原因在于chrome不支持js在本地操作cookie。据测试,除了chrome浏览器外,其他主流浏览器(ie、firefox等)都支持js在本地操作cookie。当然部署到服务器上所有浏览器都是支持的。
当然,还有另外一个原因:浏览器设置成不支持cookie。这样,调试js操作cookie当然也是不生效的。
那么,怎么知道当前浏览器不支持或Cookie已被禁用呢?可以使用以下js代码测试:var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
//没有启用cookie
alert("没有启用cookie ");
} else{
//已经启用cookie
alert("已经启用cookie ");
}
谷歌浏览器中可以看到cookie的创建时间和到期时间,可以更改本地日期进行测试。F12调试面板也可以看到cookie的信息
cookie小练习
练习内容:在2018年10月1日24点前显示m-tc里面的内容,并设置每次的缓存过期时间为一小时。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端缓存</title>
<style>
.m-tc{display: none;}
</style>
</head>
<body>
<div class="m-tc">Hello</div>
<button class="btnClose">关闭</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var endTime = (new Date(2018, 9, 1, 23, 59, 0));
//检查当前时间
if (new Date() < endTime) {
checkcookie();
}
//点击关闭时设置缓存名称、缓存内容、过期时间。
$(".btnClose").on("click", function () {
setcookie('username', 1, 1)
$(".m-tc").hide();
});
})
function setcookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setHours(exdate.getHours() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}function checkcookie() {
username= getcookie('username');
if (username != 1) {
$(".m-tc").show();
}}
function getcookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=")
if (c_start != -1) {
c_start = c_start + c_name.length + 1
c_end = document.cookie.indexOf(";", c_start)
if (c_end == -1) c_end = document.cookie.length
return unescape(document.cookie.substring(c_start, c_end))
}
}
return ""
}
</script>
</body>
</html>
2.localStorage
localStorage解决了cookie存储空间不足的问题。localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。它的特点就是“持久”,一旦保存,不通过手动清除的话,数据就永远不会过期。第二天、第二周或下一年之后,数据依然可用。它的保存格式是键值对的方式也就是“key-value”的方式保存的。IE8以上的IE版本才支持localStorage这个属性。localStorage的使用是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage。localStorage只支持string类型的存储。
localStorage写入的三种方式:
localStorage["a"]=1;
localStorage.b=1;
localStorage.setItem("c",3);
localStorage读取的三种方式:
var a=localStorage["a"];
var b=localStorage.b;
var c=localStorage.getItem("c");
localStorage的修改:
localStorage.b=1;
console.log(localStorage.b);//1localStorage.b=2;
console.log(localStorage.b);//2
localStorage的删除:
删除所有:
localStorage.clear();删除某个:
localStorage.removeItem("a");
获取localStorage的键:
localStorage.key(0); //a
3.sessionStorage
sessionStorage是一种会话级别的本地存储,一旦关闭浏览器它就会消失。它的作用域是窗口级别的,不同窗口间的sessionStorage数据不能共享。
属性方法 | 说明 |
---|---|
sessionStorage.length | 获得storage中的个数 |
sessionStorage.key(n) | 获得storage中第n个元素对的键值(第一个元素是0) |
sessionStorage.getItem(key) | 获取键值key对应的值 |
sessionStorage.key | 获取键值key对应的值 |
sessionStorage.setItem(key, value) | 添加数据,键值为key,值为value |
sessionStorage.removeItem(key) | 移除键值为key的数据 |
sessionStorage.clear() | 清除所有数据 |