前端缓存技术

数据存储

1、客户端存储-概念

1. web应用允许使用浏览器提供的API将数据存储在客户端电脑上；

2. 客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据；

3. 在同一个站点的不同页面之间，存储的数据是共享的；

4. 数据的存储有效期可以是临时的，比如关闭浏览器数据就销毁； 也可以是永久的，可以在客户端电脑上存储任意时间；

5. 在使用数据存储是需要考虑安全问题，比如银行卡账号密码；

大文件的离线存储  本地数据库  三个缓存技术(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；