zyz
H5&C3之本地存储
04/12
一、Cookie
什么是Cookie
数据存储到计算机中,通过浏览器控制添加与删除数据
Cookie特点
- 存储限制: 一个域名100个Cookie,每个4kb; - Cookie会包含在每个HTTP请求中向服务器发送,这回导致多次发送重复数据; - Cookie在网络传输时并未加密,也可能会有安全隐患; - 页面间的Cookie是共享的;
设置cookie
// num过期时间,单位秒 function setCookie(cname, cvalue, num){ var d = new Date() d.setTime(d.getTime() + (num*1000)) var expires = 'expires=' + d.toGMTString() document.cookie = cname + '=' + cvalue + '; ' + expires console.log(document.cookie) }
获取cookie
function getCookie(cname){ // 多个值存储 username=atom; password=123; age=18 var name = cname + '=' var ca = document.cookie.split(';') for(var i=0; i<ca.length; i++){ // 去除前后的空格 var c = ca[i].trim() if(c.indexOf(name) == 0) return c.substring(name.length, c.length) } return '' }
二、Storage
使用Storage保存key-value时,key、value都只能是字符串(如果有复杂数据,可以将结构化数据封装成JSON,再将JSON对象转为字符串保存)。
sessionStorage
- session临时会话,从页面打开到页面关闭的时间段; - 窗口的临时促成了,页面关闭,本地存储消失;
localStorage
- 永久存储(可以手动删除数据)
Storage的特点
- 存储量限制(5M); - 客户端完成,不会请求服务器处理; - sessionStorage数据是不共享、localStorage共享
三、Storage操作方法
setItem()
- 设置数据,key/value类型,类型都是字符串; - 可以用获取属性的形式操作; window.sessionStorage.setItem('name', oText.value); window.localStorage.setItem('name', oText.value);
getItem()
- 获取数据,通过key来获取到对对应的value; window.sessionStorage.getItem('name') window.localStorage.getItem('name')
removeItem()
- 删除数据,通过key来删除对应的value; window.sessionStorage.removeItem('name'); window.localStorage.removeItem('name');
clear()
- 删除全部存储的值; window.sessionStorage.clear(); window.localStorage.clear();
> 案例: 存储注册信息(第一次没填写完关闭,当第二次打开时,之前填写的内容还是存在的) > 当窗口关闭时触发window.onunload = function(){}
四、Storage存储事件
storage事件
- 当有数据修改或删除的情况下,就会触发storage事件 - 在对数据进行改变的窗口对象是不会触发的 - key: 修改或删除的key,如果调用clear(),key为null - newValue: 新设置的值,如果调用removeStorage(),key为null - oldValue: 调用改变前的value值 - storageArea: 当前的storage对象 - url: 触发这个改变事件页面的url - sessionStorage在同窗口下才可以,例如iframe操作就是同窗口的操作; // 添加storage事件 window.addEventListener('storage', function(ev){ ev = ev || window.event; console.log('key:' + ev.key); console.log('newValue:' + ev.newValue); console.log('oldValue:' + ev.oldValue); console.log('storageArea:' + ev.storageArea); console.log('url:' + ev.url); });
> 案例: 同步购物车(不管哪个页面操作了,但都是同步的)
五、离线缓存策略
1、localStorage, sessionStorage(字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心)
2、indexedDB (浏览器中持久地存储结构化数据的数据库)
3、web sql(已经被废弃)
4、application cache (完全离线资源缓存,加载更快 降低服务器负载,单地址页面对实时性要求不要的业务 离线web应用)
之前会使用cookies,每次的http请求头中,都会带有cookies——缺点;每个域名只能存储4K大小的cookies;主域名污染: 如果我们使用cookies存储主域名的东西,那么子域名下得Http请求都会带上主域名的东西;如果关联上网络,那么将带来安全问题。
所以,通常我们会使用cookies用在如购物车、身份验证等问题上。