HTML5的LocalStorage和sessionStorage

最新推荐文章于 2024-04-06 08:27:25 发布

请叫我小吴

最新推荐文章于 2024-04-06 08:27:25 发布

阅读量311

点赞数

分类专栏： web前端开发文章标签： html5 存储

本文链接：https://blog.csdn.net/haoxuexiaolang/article/details/79368265

版权

web前端开发专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在HTML5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。

前言：由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

1、web Storage（LocalStorage + sessionStorage）

web Storage 是HTML5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

1.setItem (key, value) —— 保存数据，以键值对的方式储存信息。
2.getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
3.removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
4.clear () —— 删除所有的数据
5.key (index) —— 获取某个索引的key

1.1 localStorage和sessionStorage的方法

setItem存储value

sessionStorage.setItem(“key”, “value”);
localStorage.setItem(“site”, “js8.in”);

getItem获取value

var value = sessionStorage.getItem(“key”);
var site = localStorage.getItem(“site”);

removeItem删除key

sessionStorage.removeItem(“key”);
localStorage.removeItem(“site”);

clear清除所有的key/value

sessionStorage.clear();
localStorage.clear();

综合案例

var storage = null;  
if(window.localStorage){              //判断浏览器是否支持localStorage  
   storage = window.localStorage;       
   storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  

   storage.removeItem("name");     //调用removeItem方法，移除数据  
   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  

}

1.2其他操作方法：点操作和[ ]

web Storage可以像普通对象一样用点(.)操作符，及[ ]的方式进行数据存储，像如下的代码：

    var storage = window.localStorage; 
    storage.key1 = "hello"; 
    storage["key2"] = "world"; 
    console.log(storage.key1); 
    console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历例如下面的代码：

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){     
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}

2、storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
} 
function handle_storage(e){     
    if(!e){
        e=window.event;
    }
}

3、两者之间的区别

3.1 LocalStorage和sessionStorage功能

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

3.2 localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage需要注意的有以下几点：

（1）页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；
（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；
（3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
（4）sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；
（5）大小不超过5M；
（6）不自动发送数据到服务器
验证：准备两个html文件，index.html和text.html。

index.html代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>index</title>  
    <script>  
        function submit() {  
            var str = document.getElementById("text").value.trim();
            if(str === '') {
                return;
            }  
            setInfo(str);  
            document.getElementById("text").value = "";  
        }  
        //储存数据  
        function setInfo(name) {  
            var storage = window.sessionStorage;  
            storage.setItem('name', name);  
        }  
        //显示数据  
        function shows() {  
           var storage = window.sessionStorage;  
           var str = ' ' + storage.getItem("name");  
           document.getElementById("text").value = str;  
        }  
     </script>  
</head>  
<body>  
      Your name is:<input type="text" name="text" id="text" />  
     <input type="button" value="Login" onclick="submit()" />  
     <input type="button" value="show" onclick="shows()" />  
     <a href="text.html" target="_blank">点击打开</a>  
</body>  
</html>

test.html代码

 <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>  
    </head>  
    <body>  
     <script>  
         var storage = window.sessionStorage;  
         alert(storage.getItem("name"));  
     </script>  
    </body>  
</html>

（1）页面刷新不会消除数据

当点击show按钮后，输入框内显示 “null“，此时sessionStorage中没有存储key为 ”name“的数据。
当在文本中输入”Rick“后，点击login按钮，待输入框清空的时候，数据已经存储到sessionStorage中，再去点击show按钮，会显示” Rick“
此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”Rick“。

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

点击页面上的 “点击打开” ，就会弹出对应的index.html文件存储的sessionStorage数据

其他说明：

后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面或者直接关闭浏览器，才可以消除sessionStorage中的数据。

请叫我小吴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的LocalStorage和sessionStorage

HTML5的LocalStorage和sessionStorage在HTML5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。前言：由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多
复制链接

扫一扫

专栏目录