本地存储localStorage和sessionStorage

cookie劣势：

存储大小限制，4kb

单域名下有数量限制，50个左右

污染请求头，浪费流量

本地存储web storage

包括localStorage和sessionStorage

localStorage 本身是一个对象，可以打印查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        console.log(localStorage);
    </script>
</body>
</html>

setItem() 设置存储内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        localStorage.setItem("cyy",25);
        console.log(localStorage);
    </script>
</body>
</html>

将赋值语句注释，关闭网页后再次打开，存储的数据依旧存在

getItem() 获取存储内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        //localStorage.setItem("cyy",25);
        console.log(localStorage.getItem("cyy"));
    </script>
</body>
</html>

使用对象方式存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        //使用对象方式存储
        localStorage.cyy2=26;
        console.log(localStorage);
    </script>
</body>
</html>

获取方式同理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        //使用对象方式存储
        localStorage["cyy3"]=24;
        console.log(localStorage.cyy3);
        console.log(localStorage["cyy3"]);
    </script>
</body>
</html>

使用 removeItem() 删除存储的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        // localStorage.cyy="cyy";
        // localStorage.cyy2="cyy2";
        localStorage.removeItem("cyy2");
        console.log(localStorage.cyy);
        console.log(localStorage.cyy2);
    </script>
</body>
</html>

使用 clear 清除存储内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        localStorage.cyy="cyy";
        localStorage.cyy2="cyy2";
        localStorage.cyy3="cyy3";
        localStorage.cyy4="cyy4";
        console.log(localStorage);
    </script>
</body>
</html>

localStorage.clear() 清除所有存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        // localStorage.cyy="cyy";
        // localStorage.cyy2="cyy2";
        // localStorage.cyy3="cyy3";
        // localStorage.cyy4="cyy4";
        
        localStorage.clear();
        console.log(localStorage);
    </script>
</body>
</html>

使用 length 属性获取存储的个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        localStorage.cyy="cyy";
        localStorage.cyy2="cyy2";
        localStorage.cyy3="cyy3";
        localStorage.cyy4="cyy4";

        console.log(localStorage.length);
    </script>
</body>
</html>

不同的存储时效

localStorage 存储会持久化（一般来说没有时效，不像cookie）

sessionStorage 会在网页关闭时失效（刷新不会失效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        sessionStorage.cyy="cyy";

        console.log(sessionStorage);
    </script>
</body>
</html>

不同的存储容量

localStorage 一般是2-5M

sessionStorage 存储容量不一，部分浏览器没有限制

使用storage时的注意点：

1、存储容量超出限制（会抛出QuotaExceededError异常，应该使用try catch）

2、存储类型限制（只能存储字符串）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    <script>
        localStorage.a=[1,2,3];

        console.log(localStorage);
    </script>
</body>
</html>

3、sessionStorage失效机制（刷新不会失效，关闭页面会失效）

实现一个带有过期机制的localStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
    储存数据：<input type="text" id="data"><br>
    储存时间（分钟）：<input type="text" id="time"><br>
    数据展示：<span id="show">暂无数据</span><br>
    <button id="btn">保存</button>

    <script>
        var now=new Date().getMinutes();
        if(now>=localStorage.time){
            localStorage.clear();
        }else{
            if(localStorage.data){
                show.innerHTML=localStorage.data;
            }
        }

        btn.onclick=function(){
            localStorage.setItem("data",data.value);
            show.innerHTML=localStorage.data;

            localStorage.setItem("time",new Date().getMinutes()+Number(time.value));
        }

        console.log(localStorage);
    </script>
</body>
</html>

web storage的优化

性能与存储容量大小无关，与读取次数有关

建议：

减少读取次数

一个item中尽量多储存数据

转发 https://www.cnblogs.com/chenyingying0/p/12438795.html

posted @ 2020-03-08 00:25 前端老鸟阅读(248) 评论(0) 收藏举报

刷新页面返回顶部

前端老鸟

本地存储localStorage和sessionStorage

公告