欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

sessionstorage和localstorage区别（代码讲解）

程序员文章站 2022-04-04 21:37:25
众所周知，自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于w...

众所周知，自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

下面，关于WebStorage及其两种形式作具体的描述和讲解。

1、web Storage

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

setItem (key, value) —— 保存数据，以键值对的方式储存信息。

getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) —— 删除单个数据，根据键值移除对应的信息。

clear () —— 删除所有的数据

key (index) —— 获取某个索引的key

2、localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

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  
  
    }

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

3、sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

<1> 页面刷新不会消除数据

为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下：

index.html

<span style="font-size:14px;">    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Test</title>  
        <script>  
            function submit() {  
                var str = document.getElementById("text").value.trim();  
                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 = "your name is " + storage.getItem("name");  
               document.getElementById("text").value = str;  
            }  
         </script>  
    </head>  
    <body>  
         <input type="button" value="Login" onclick="submit()" />  
         <input type="text" name="text" id="text" />  
         <input type="button" value="show" onclick="shows()" />  
         <a href="text.html" target="_blank">点击打开</a>  
    </body>  
    </html></span>

text.html页面如下：

<span style="font-size:14px;">     <!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></span>

 

上一篇： CSS 书写规范

下一篇： 家属：让他感受一下紧张的气氛

推荐阅读