每日JavaScript - 13

最新推荐文章于 2023-07-07 19:19:10 发布

tcap99

最新推荐文章于 2023-07-07 19:19:10 发布

阅读量125

点赞数

分类专栏：前端 Javascript

本文链接：https://blog.csdn.net/tcap99/article/details/83860053

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

Javascript

44 篇文章 0 订阅

订阅专栏

这是关于客户端存储的文章。
离线检测
HTML5定义了一个navigator.onLine属性，true为设备能上网，false为设备离线。但存在兼容性问题。状态改变时，会在window对象中触发online和offline事件。
应用缓存

<html mainfest="/offline.manifese>

核心API是applicationCache对象，有一个status属性表示当前状态。详情阅读p628。

数据存储

cookie
要求服务器响应有Set-Cookie HTTP头

HTTP/1.1 200 OK
Content-type:  text/html
Set-Cookie:  name=value
Other-header: other-header-value

各个浏览器对cookie的个数要求不一样。safari和chrome对cookie数量没硬性规定。
大多限制cookie长度在4kb内。

var CookieUtil = {
	// get可根据cookie的名字获取相应的值
	get: function(name) {
		const cookieName = encodeURIcOMPONET(name) + "=",
			   cookieStart = document.cookie.indexOf(cookieName),
			   cookieValue = null
		if (cookieStart > -1) {
			const cookieEnd = document.cookie.indexOf(";", cookieStart)
			if (cookieEnd == -1) {
				cookieEnd = document.cookie.length
			}
			cookieValue = decodeURICompoent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))	
		}
		return cookieValue
	}
	// set设置一个cookie
	set: function(name, value, expires, path, domain, secure) {
		var cookieText = encodeURIComponet(name)+"="+encodeURIComponet(value)
		if(expires instanceof Date) {
			cookieText += "; expires=" + expires.toGMTString()
		}
		if(path) {
			cookieText += ";path=" + path
		}
		if(domain) {
			cookieText += "; domain" + domain
		}
		if(secure) {
			cookieText += "; secure"
		}
		document.cookie = cookieText
	}
	// 删除已有的cookie
	unset: function(name, path, domain, secure) {
		this.set(name, "", new Date(0), path, domain, secure)
	}
}

cookie中的domain
二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。
cookie没法直接删除，使用CookieUtil.unset()将失效时间设置为过去的时间。

web存储
locaStorage
我们可以通过locaStorage在浏览器端存储键值对数据，它相比于cookie而言，提供了更为直观的API，且在安全上相对好一点
，而且虽然locaStorage只能存储字符串，但它也可以存储字符串化的JSON数据，因此相比于cookie，locaStorage能存储更复杂的数据

优点：
提供简单明了的API来进行操作
更加安全
可存储更多数据

// 使用方法存储数据
localStorage.setItem("name", "jackson")

// 使用属性存储数据
localStorage.book = "Professional JavaScript"

// 使用方法读取数据
var name = localStorage.getItem("name")

// 使用属性读取数据
var book = localSorage.book

// 删除数据
localStorage.removeItem("name")

通过locaStorage存储的数据时永久性的，除非我们使用removeItem来删除或者用户通过设置浏览器配置来删除，负责数据会一直保留在用户的电脑上，永不过期。
locaStorage的作用域限定在文档源级别的（意思就是同源的才能共享），同源的文档间会共享locaStorage的数据，他们可以互相读取对方的数据，甚至有时会覆盖对方的数据。当然，locaStorage的作用域同样也受浏览器的限制。

未完待续