HTML5存储
来源:互联网 发布:js改变color 编辑:程序博客网 时间:2024/06/04 08:41
localStorage和sessionStorage
localStorage和sessionStorage是HTML5中引入的新的本地存储策略。传统的cookie不仅在大小上有限制(4kb),而且其每次请求时都要加在请求头中的,非常浪费网络资源。localStorage和sessionStorage将存储大小提升到5MB,可以通过它们将部分数据本地化,降低资源加载等对网站性能的影响。关于cookie的更多知识,可以访问MDN相关内容。
localStorage的生命周期默认是永久有效,手动删除后销毁;sessionStorage的生命周期是一个会话的是时间长度,关闭网页或者浏览器数据销毁;
另外需要注意的是,每个网站有其独立的本地存储,不同的网站之间的数据不能直接共享(主域名相同子域名不同也不可以)。
常用的方法有localStorage.setItem(key, val)->设置键值对, localStorage.getItem(key)->获取值, localStorage.key(index)->根据索引返回键名, localStorage.removeItem(key)->移除键值对,localStorage.clear()->移除所有,设置和获取值还可以使用localStorage.key。
限制:数据大小仍有限,但是不能自动销毁,因此为了提高适应性(网站更新等),需要自行制定相应的存储过期控制;并且使用LRU,FIFO等更新策略;
Demo1代码实现过程中遇到canvas安全策略的限制,可以使用Apache服务器并将资源放到对应的网站目录下即可。如果是使用服务器端语言处理请求,可以在响应头中加入Access-Control-Allow-Origin: *。
localStorage可以在同源的不同标签页中进行访问,而sessionStorage不可以;
### Demo1: localStorage应用测试<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="cache-control" content="no-cache"> <script> var src = 'bg4.JPG'; function set(key) { var img = document.createElement('img'); img.addEventListener('load', function(){ var imgCanvas = document.createElement('canvas'); imgCxt = imgCanvas.getContext('2d'); imgCanvas.width = this.width; imgCanvas.height = this.height; //将图片渲染到canvas的context imgCxt.drawImage(this, 0, 0, this.width, this.height); //将图片转为Data URL图像文件 var imgDataUrl = imgCanvas.toDataURL('image/png'); try{ localStorage.setItem(key, imgDataUrl); } catch (e) { console.log(`LocalStorage failed: ${e}`); } }, false); img.src = src; } set('img'); function get(key) { var getSrc = localStorage.getItem(key); var getImg = document.createElement('img'); getImg.src = getSrc; document.body.appendChild(getImg); } window.onload = function () { if (!localStorage.count) { localStorage.count = 0; } if (localStorage.count == 0) { var r = window.confirm("execute set operation?") if (r == true) { get('img'); localStorage.count = localStorage.count - 0 + 1; } } else { get('img'); } } </script></head><body> <div class="container"> <canvas id="mycanvas"></canvas> </div></body></html>
测试结果如下:
### Demo2: 过期控制简单示例 <script> function set(key, val) { var curTime = new Date().getTime(); localStorage.setItem(key, JSON.stringify({data:val, time:curTime})); } function get(key, expires) { var data = localStorage.getItem(key); var dataObj = JSON.parse(data); if(new Date().getTime() - dataObj.time > expires) { console.log('expires'); } else { console.log(`data = ${dataObj.data}`); } } </script>
未完,待更。。。
References
- 慕课网:HTML5存储;
- MDN:https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage;
- HTML5存储
- html5存储
- html5存储
- HTML5存储
- HTML5存储
- HTML5存储
- html5存储
- HTML5存储
- 【html5】html5 本地存储
- 【html5】html5 本地存储
- HTML5 - 存储和新元素
- HTML5本地存储
- HTML5 LocalStorage 本地存储
- HTML5 存储API介绍
- HTML5 本地存储初探
- HTML5本地存储
- HTML5本地存储
- HTML5 LocalStorage 本地存储
- 085-C++
- 086-C++
- Java-面向对象
- 087-C++
- 088-C++
- HTML5存储
- Html+Css学习第四天
- 089-C++
- tensorflow学习笔记(五):TensorFlow变量共享和数据读取
- [Kibana > Timelion] Timelion.json is not working
- 090-C++
- 091-C++
- HDU 5113 Black And White(深搜+剪枝)
- AtCoder Tasks B インタラクティブ練習 (Interactive Sorting)