文章目录
一、 Storage浏览器本地存储
1-1 localStorage与 sessionStorage
-
Storage不会自动把数据发送给服务器，仅在本地保存
-
Storage也有存储大小的限制，但比cookie大得多，可以达到5M或更大
-
数据有效期不同
- sessionStorage： 仅在当前浏览器窗口关闭之前有效
- localStorage： 始终有效，窗口或者浏览器关闭也一直保存，用作持久数据
-
作用域不同
- sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
- localStorage：在所有的同源窗口中都是共享的
-
webStorage支持事件通知机制，可以将数据更新的通知发送给监听者
-
webStorage的api接口使用更方便
1-2 使用
-
xxxStorage.setItem('key','value')xxxStorage.getItem('key')xxxStorage.removeItem('key')xxxStorage.clear()
-
以localStorage举例：
<!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>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我删除所有数据</button>
<script>
let p = {
name: '张三',
age: 18
}
function saveData() {
localStorage.setItem('msg','hello!!!')
localStorage.setItem('person',JSON.stringify(p))
}
function readData() {
console.log(localStorage.getItem('msg'));
consoloe.log(JSON.parse(localStorage.getItem('person')))
}
function deleteData() {
localStorage.removeItem('msg')
}
function deleteAllData() {
localStorage.clear()
}
</script>
</body>
</html>
1-3 手写一个会过期的localStorage
1-3-1 惰性删除
- 惰性删除： 某个键值过期之后，该键值不会被删除。而是等到下次使用，被检查过期值，才能得到删除
var lsc = (function(self){
var prefix = 'one_more_lsc_'
// 增加一个键值对数据
self.set = function(key, val, expires) {
key = prefix + key
val = JSON.stringify({'val': val, 'expires': new Date().getTime() + expires * 1000})
localStorage.setItem(key, val)
}
// 读取对应键的值
self.get = function (key) {
key = prefix + key;
var val = localStorage.getItem(key)
if (!val) {
return null;
}
val = JSON.parse(val);
if (val.expires < new Date().getTime()) {
localStorage.removeItem(key);
return null;
}
return val.val
}
return self;
}(lsc || {}));
1-3-2 定时删除
-
- 每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用
- 定时删除有效减少了对localSorage空间的浪费
-
每隔1s执行一次定时删除，操作如下：
- 随机测试20个设置了过期时间的key
- 删除所有发现的已过期的key
- 若删除的key超过5个则重复步骤一，直至重复500次
var lsc = (function (self) {
var prefix = 'one_more_lsc'
var list = [];
// 初始化list
self.init = function () {
var keys = Object.keys(localStorage)
var reg = new RegExp('^' + prefix);
var temp = []
// 遍历所有localStorage中的所有key
for (var i = 0; i < keys.length; i++) {
// 找出可过期缓存的key
if (reg.test(keys[i])) {
temp.push(keys[i])
}
}
list = temp;
}
self.init();
self.check = function () {
if (!list || list.length == 0) {
return
}
var checkCount = 0
while(checkCount < 500) {
var expireCount = 0
// 随机测试20个设置了过期时间的key
for (var i = 0; i < 20; i++) {
if(list.length == 0) {
break;
}
var index = Math.floor(Math.random() * list.length);
var key = list[index];
var val = localStorage.getItem(list[index])
// 从list中删除被惰性删除的key
if(!val) {
list.splice(index, 1);
expireCount++;
countinue;
}
val = JSON.parse(val)
// 删除所有发现的已过期的key
if (val.expires < new Date().getTime()) {
list.splice(index, 1);
localStorage.removeItem(key)
expireCount++
}
}
// 若删除的key不超过5个则跳出循环
if (expiresCount <= 5 || list.length == 0) {
break
}
}
// 每隔1s执行一次定时删除
window.setInterval(self.check,1000)
return self;
}
}(lsc || {}))
1-4 Storage的限制
- 浏览器的大小不统一，并且在IE8以上版本才支持localStorage这个属性
- 所有浏览器都会把Storage的值类型限定为string类型，使用
JSON.stringfy()将JSON对象转换为字符串 - Storage在浏览器的隐私模式下面是不可读的
- Storage本质上是对字符串的读取，存储内容多的话会消耗内存空间，导致页面变卡
- Storage不能被爬虫抓取到
二、 Cookie
2-1 cookie与Storage的区别
-
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和 服务器间来回传递
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
-
存储大小限制不同： cookie数据不能超过4K
- 同时因为每次http请求都需要携带cookie，所以cookie知识和保存很小的数据，如会话标识
-
数据有效期不同：cookie只在设置的cookie过期时间之前有效，即使窗口关闭或者浏览器关闭
-
作用域不同： 在所有同源窗口中都是共享的
2-2 cookie的概念
-
- cookie是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，就可以通过JS来创建和读取cookie
- cookie是存于用户硬盘的一个文件。这个文件对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用
- cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用
- 不同浏览器对cookie的实现不同，保存在一个浏览器中的cookie到另一个浏览器是不能获取的
2-3 cookie用途
- 只需要登陆一次，将登录信息存放在cookie中。下次登陆时就可以直接获取cookie中的用户名密码来进行登录
- 页面之间的传值，一个页面跳转至另一个页面： 将数据保存在cookie中，然后在另外页面再去获取cookie中的数据
2-4 cookie使用
2-4-1 介绍
document.cookie = "name=value;expires=evalue;path=pvalue;domain=dvalue;secure;"- 这是一个键值对，分别表示要存入的 属性 和 值。
- 为了防止中文乱码，我们可以使用encodeURIComponent()编码；decodeURIComponent()解码
document.cookie="name=中文"; //为了防止中文乱码，我们可以使用encodeURIComponent()编码；decodeURIComponent()解码 document.cookie = encodeURIComponent("name")+"="+encodeURIComponent("中文")
2-4-2 使用cookie案例
function setCookie(objName, objValue, objHours) { // 添加cookie
var str = objName + '=' + encodeURIComponent(objValue);
if (objHours > 0) { // 为0时不设定过期时间，浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += ";expires=" + date.toUTCString();
}
document.cookie = str
}
// 获取cookie
function getCookie(objName) { // 获取指定名称的cookie值
// 多个cookie保存的时候是以; 分开的
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName) {
return decodeURIComponent(temp[1])
} else {
return "";
}
}
// 为了删除指定名称的cookie，可以将过期时间设定为一个过去的时间
function delCookie(name) {
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toUTCString();
}
}
2-5 cookie使用的注意
-
cookie可能被禁用，当用户非常注重个人隐私保护时，可能被禁用
-
cookie是与浏览器相关的
- 即使访问同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的
-
cookie可能被删除，cookie就是硬盘上的一个文件，可能被用户删除
-
cookie安全性不够高，所有的cookie都是以纯文本的形式记录在文件中，要保护用户名密码等信息时，最好实现经过加密处理
-
cookie在保存时，只要后面保存的name相同，就覆盖前面的cookie
三、Storage与Cookie的共同点
- 都是保存在浏览器端，且都是同源的
2520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
