手机浏览器缓存视频

浏览器存储数据

cookie、localStorage、sessionStroage之间的区别

共同点：都是存储在浏览器中且都是同源的。
区别：
1. cookie数据始终咋同源的http请求中携带（即使不需要），也就是说cookie实在浏览器和服务器之间来回传递，而sessionStorage和localStroage仅仅在浏览器本地保存。cookie数据拥有path（路径）的概念，可以限制cookie只属于某个路径下。
2. 三者的存储大小也不相同，一般来讲cookie的数据不能超过4k，因为每次的http请求都会携带cookie数据，如果太大就会造成性能上的损耗。sessionStroage和localStroage也有存储大小的限制，但是比起cookie要宽松很多了，可达到5M甚至更大。
3. 数据的有效期不同，sessionStroage：仅仅是在当前的浏览器窗口关闭前有效属于有效期最短的存储；localStroage：始终有效，即使窗口关闭或浏览器关闭也一直保存，因此常用作数据持久化；cookie：取决于设置的有效期，有效期之前即便是窗口或者浏览器关闭页有效。
4. 作用域不同,sessionStroage不会实现跨浏览器窗口共享，即使是在同一个页面；localStroage和cookie在所有同源的窗口中都是共享的。
5. webStroage支持时间通知机制，支持数据更新通知的发送和监听；
6. webStroage的api接口使用便捷。

如何实现可以过期的localStroage

两种方案：惰性删除以及定时删除

惰性删除： 存储在localStroage中的数据都是key：value格式，所谓惰性删除指的是使用了某一个key之后不会立即将其删除，而是在下次使用时检查到期，然后才能得到删除。

var lsc = (function (self) { 
    var prefix = 'one_more_lsc_' / * 增加一个键值对数据 * @param key 键 * @param val 值 * @param expires 过期时间，单位为秒 */ self.set = function (key, val, expires) { 
    key = prefix + key; val = JSON.stringify({ 
   'val': val, 'expires': new Date().getTime() + expires * 1000}); localStorage.setItem(key, val); }; / * 读取对应键的值数据 * @param key 键 * @returns {null|*} 对应键的值 */ self.get = function (key) { 
    key = prefix + key; var val = localStorage.getItem(key); if (!val) { 
    return null; } val = JSON.parse(val); if (val.expires < new Date().getTime()) { 
    localStorage.removeItem(key); return null; } return val.val; }; return self; }(lsc || { 
   }));

惰性删除有一个很明显的缺点就是——如果某一个key一直没有被使用那他就不会被检测到过期，也就会一直留在浏览器中；

定时删除： 每隔一段时间进行一次删除操作，并限制删除的次数和频率来减少删除操作对CPU长期占用，有效的改善了惰性删除导致的localStroage空间浪费。

localStroage的限制条件

不支持跨域
每个浏览器对于localStroage的大小不统一，比那个且在IE8以上的IE浏览器才支持这个属性。
浏览器对于localStroage的值作了限定（String类型），这导致我们在实际使用时需要做ISON数据转换。
localStroage本质是读取字符串，如果内容过多的话会消耗内存空间导致页面卡顿。
localSroage无法被爬虫抓取到。

判断浏览器是否支持localStroage属性

 if(！window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ //主逻辑业务 }

localStroage解决跨域的方式

简单实现一下：

// 页面A代码 window.onload = function(){ 
    //http://localhost:8080主页面加载完后还需要等待引入的页面加载完成再执行，不然会出错，延迟3秒等待引入页面加载完成 setTimeout(() => { 
    console.log("春哥纯爷们！"); //在页面加载完成后主页面向iframe发送请求 window.frames[0].postMessage("要发送的数据", "目标窗口（页面B）"); // 主页面监听message事件, window.addEventListener( "message", function(e) { 
    var data = e.data; console.log("要发送的数据是：", data); }, false ); }, 3000); } // 页面B代码 window.onload = function(){ 
    window.addEventListener('message', function(e) { 
    if (e.source != window.parent) { 
    return; } console.log('传过来的数据：', e.data); localStorage.setItem('task', e.data);//将收到的A页面数据进行保存 window.parent.postMessage('人民好兄弟，父亲好儿子。', '*'); }, false); var person = localStorage.getItem("task"); console.log("读取出的数据：",person); }