HTML5存储

最新推荐文章于 2024-10-19 19:48:37 发布

Neil-

最新推荐文章于 2024-10-19 19:48:37 发布

阅读量305

点赞数

分类专栏： html5 文章标签： localStora sessionSto html5 存储

本文链接：https://blog.csdn.net/luofeng457/article/details/72973550

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>