web存储 localStorage与sessionStorage

短命女 2022-07-14 08:47 163阅读 0赞

`Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。`

`Web Storage又分为两种：`

`sessionStorage`

`localStorage`

`从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；`

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

不管是sessionStorage，还是localStorage，可使用的API都相同。

localStorage实例：

html代码：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/app.js"></script> </head> <body> <textarea style="width:200px;height:200px" id="textarea"></textarea> <button id="btn">保存</button> </body> </html>

js代码：

var textarea;
    var btn;
    window.onload = function(){
        textarea = document.getElementById("textarea");
        if(localStorage.text){
            textarea.value = localStorage.text;
        }
    
        btn = document.getElementById("btn");
        btn.onclick = function(){
            localStorage.text = textarea.value;
        }
    }

效果：

![20161204143651597][]

**在文本框中输入后点击保存之后，就算刷新页面或这关闭后打开，输入的数据都会显示在文本框中。**

sessionStorage实例：

html代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="js/app.js"></script>
    </head>
    <body>
        <span id="txt">0</span>
        <button id="btn">Add</button>
    </body>
    </html>

js代码：

**当你点击add按钮时会一直加1，刷新后点击add依然是从上次的数据继续加1，但如果浏览器关闭后重新打开就是从0开始加。**

[20161204143651597]: /images/20220714/9d43c5dd5f68412b8e1a72e33659ac3b.png