数据存储
1、客户端存储-概念
-
web应用允许使用浏览器提供的API将数据存储在客户端电脑上;
-
客户端存储遵守“同源策略”,不同的站点页面之间不能相互读取彼此的数据;
-
在同一个站点的不同页面之间,存储的数据是共享的;
-
数据的存储有效期可以是临时的,比如关闭浏览器数据就销毁; 也可以是永久的,可以在客户端电脑上存储任意时间;
-
在使用数据存储是需要考虑安全问题,比如银行卡账号密码;
大文件的离线存储 本地数据库 三个缓存技术(Cookie SessionStorage LocalStorage)
cookie(比较老的技术,只有存取,如果想增删改查要自己设计函数)
创建cookie:
document.cookie = 'age=20';
document.cookie = 'name=刘桐;max-age=' + 24 * 60 * 60 ;//指定cookie有效期
获取cookie:
var myCookie = document.cookie;
//创建cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires+";path=/";
}
setCookie("name", 123,3)
//获取cookie
function getCookie(cname) {
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 "";
}
//打印所有cookie
console.log(document.cookie)
//判断是否有某个cookie
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:", "");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
3、localStorage和sessionStorage(都是h5新增的技术,存在增删改查等功能,不需要自己再设计)
localStorage和sessionStorage是window的两个属性,他们代表同一个Storage对象;
localStorage和sessionStorage的API:
setItem():将对应的名字和值传递进去,可以实现数据存储;
getItem():将名字传递进去,可以获取对应的值;
removeItem():将名字传递进去,可以删除对应的值;
clear():删除所有的缓存值,不需要参数;
length:属性,获取键值对总数;
key():传入位置数,获取存储的值的名字
4、localStorage:永久性保存
setItem(string key, value); //保存 getItem(string key);//获取 clear();//清空 removeItem(sring key)//根据键得到值
5、sessionStorage:关闭浏览器数据就自动全部删除
sessionStorage.length :返回一个整数,表示存储在 sessionStorage 对象中的数据项(键值对)数量。
sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返null。
sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。 sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。 sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。 sessionStorage.clear() :清除 sessionStorage 对象所有的项。
6、localStorage和sessionStorage区别
localStorage和sessionStorage存储数据的有效期和作用域不同:
(1)localStorage
localStorage:存储的数据是永久的,当然用户可以清除这些缓存数据的; 比如清除历史记录就可以清除这些数据;
localStorage的作用域限制在文档源; 文档源由协议、域名、端口三者来确定;下面的URL就拥有不同的文档源:
这种情况下,localStorage存储的数据是不能相互访问的; 即便他们来自同一台服务器;
localStorage同源的文档之间可以相互访问和修改相同名称的数据;
localStorage受浏览器厂商的限制,chrome下存储的数据,360浏览器下不可访问; 会得到‘Invalid Date’;
(2)sessionStorage
sessionStorage存储的数据在窗口或标签关闭时,数据就会丢失; 在一个标签前进后退时数据不会丢失,这样我们就可以获取上次访问时产生的相关信息; 随着现代浏览器越来越强大,具体的声明周期还和浏览器功能有关;
sessionStorage在localStorage的同源策略基础上,有更严格的限制:
他还被限制在窗口中,意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage;
但是不同的窗口或标签页之间不能共享sessionStorage,即便他们是同一个页面地址;
窗口是指顶级窗口,如果是多个iframe,他们之间共享sessionStorage;
7、localStorage、sessionStorage、cookie三者的区别
(1)存储大小
cookie数据大小不能超过4k ;
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;
(2)有效时间
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除;
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;
(3)数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端;
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存; (4)作用域
localStorage的作用域限制在文档源的;
localStorage同源的文档之间可以相互访问和修改相同名称的数据;
localStorage受浏览器厂商的限制,chrome下存储的数据,360浏览器下不可访问; 会得到‘Invalid Date’;
sessionStorage在localStorage的同源策略基础之上,还有更严格的限制:
他还被限制在窗口中,意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage;
但是不同的窗口或标签页之间不能共享sessionStorage,即便他们是同一个页面地址;
这里的窗口是顶级窗口,如果里面有多个iframe,他们之间共享sessionStorage;