web应用大多数数据都是在远程web服务器上,如果用户网络差,请求时间比较长,则会大大降低用户的使用体验。所以web数据本地化很重要。现在常用的本地化方法有以下几点:
- cookie
- storage
cookie
存储在浏览器中的一段字符串。打开一个页面,在控制台里输入document.cookie
,返回的那段字符串就是cookie。
世界本无cookie,有了http就有它。
想象一个场景,我在chrome浏览器中登录了一个网站,关掉当前页面,重新打开,我一直处于登录状态,那么web服务器是怎么知道我是登录状态还是未登录状态呢?
这里面有一个关于HTTP的问题,因为HTTP是无状态的。你的浏览器和对方的服务器建立链接,之后自动断开。当你第一次输入用户名,密码时,通过HTTP将数据传到web服务器,后台会创建一个session(一个存储对象,用来标识客户端),通过根据session创建一条cook,然后通过HTTP协议的response的Set-Cookie
返回给浏览器,浏览器自己会存储这个cookie,在下一次发送请求时会把这条cookie放到请求头里传到对方的web服务器中,服务器根据这条cookie和预先创建的session进行比对,来判断用户的登录状态。
cookie本质上是一段字符串,其中包含以下一些信息:
- key=value形式的键值对,用
;
隔开 - 有效时间(格林尼治时间,比北京时间早8小时),如:expires=Fri, 23 Feb 2018 05:47:59 -0000
- Secure,通过HTTPS协议加密过的请求发送给服务端
- HttpOnly,如果设置该值则在前端通过
document.cookie
无法获取 - Domain/Path,指定要发送该cookie的域名(一般也包括子域名,比如zhidao.baidu.com 就是baidu.com的子域名)和资源路径(Path=/doc,如果指定上述信息,那么访问/doc/*都会带上该cookie,访问/assets 就不会带上cookie)
以上说的内容没法通过document.cookie
全部显示出来,可以通过查看开发者工具里,查看http请求头和响应头。
JavaScript提供document.cookie
方法,可以获取当前页面可查看的cookie。
可以查看runoob cookie的教程,里面有对cookie操作的方法。
自己顺手封装了一个
; (function (factory) {
var define = window.define || {}
if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
module.exports = factory()
} else if (typeof define === 'function' && define.amd) {
define(factory)
} else {
window.Cookie = factory()
}
})(function () {
// 将字符串转为对象
function parseStr(str) {
if (typeof str === 'string') {
var cookieArr = str.split(';')
var CookieObj = {}
for (var i = 0; i < cookieArr.length; i++) {
var item = cookieArr[i].split('=')
CookieObj[item[0]] = item[1]
}
return CookieObj
}
}
// 将对象转为字符串
function stringStr(obj) {
var str = ''
for (var i in obj) {
str += i + '=' + obj[i] + ';'
}
return str
}
var Cookie = {
get: function () {
return parseStr(document.cookie)
},
set: function (key, value) {
var CookieObj = parseStr(document.cookie)
CookieObj[key] = value
return stringStr(CookieObj)
},
del: function (key) {
var CookieObj = parseStr(document.cookie)
if (CookieObj[key] !== undefined) {
delete (CookieObj[key])
return stringStr(CookieObj)
}
}
}
return Cookie
});
Storage
Storage
:中文译为“仓库,存储”。是W3C建议一种本地存储数据的方式。Storage
为每一个给定的源(同源策略的源,protocol://host:port/*
)建立一块仓库存储当前源下的数据。Storage本身没有实际意义,但是基于Storage
构造的sessionStorage
和localStorage
有更多的使用意义。前者只存在浏览器页面会话期间(即只要浏览器处于打开状态,包括页面重新加载和恢复),后者可以长期存储。
Storage
提供以下API:
Storage.length
返回一个整数,表示存储在 Storage 对象中的数据项数量。Storage.key()
该方法接受一个数值 n 作为参数,并返回存储中的第 n 个键名。Storage.getItem()
该方法接受一个键名作为参数,返回键名对应的值。Storage.setItem()
该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。Storage.removeItem()
该方法接受一个键名作为参数,并把该键名从存储中删除。Storage.clear()
调用该方法会清空存储中的所有键名。
// 展示localStorage所有的数据
var wStorage = window.localStorage;
var storageArr = {}
for (var i = 0; i < wStorage.length; i++) {
storageArr[wStorage.key(i)] = wStorage.getItem(wStorage.key(i))
}
console.log(storageArr)
有时候我们需要再一个key中展示更多更复杂的数据结构的数据,提供一个方法,传送门,是对Storage
其中的某一条做增删查改操作。