本地存储localStorage和sessionStorage

时间 2020-03-09

标签本地存储 localstorage sessionstorage 栏目网站开发繁體版

原文原文链接

cookie劣势：html

存储大小限制，4kbweb

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

污染请求头，浪费流量cookie

本地存储web storagesession

包括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() 设置存储内容spa

<!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>

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

getItem() 获取存储内容code

<!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时的注意点：

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

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

<!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>

三、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中尽可能多储存数据