LocalStorage和sessionStorage之间的区别

众所周知,自从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属性,可以查看其有多少条记录的数据。使用方法如下:

[javascript]  view plain  copy
  1. var storage = null;  
  2.     if(window.localStorage){              //判断浏览器是否支持localStorage  
  3.        storage = window.localStorage;       
  4.        storage.setItem("name""Rick");    //调用setItem方法,存储数据  
  5.        alert(storage.getItem("name"));     //调用getItem方法,弹框显示 name 为 Rick  
  6.        storage.removeItem("name");     //调用removeItem方法,移除数据  
  7.        alert(storage.getItem("name"));   //调用getItem方法,弹框显示 name 为 null  
  8.   
  9.     }  

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

       3、sessionStorage

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

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

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

       index.html

[html]  view plain  copy
  1. <span style="font-size:14px;">    >  
  2.     <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Testtitle>  
  6.         <script>  
  7.             function submit() {  
  8.                 var str = document.getElementById("text").value.trim();  
  9.                 setInfo(str);  
  10.                 document.getElementById("text").value = "";  
  11.             }  
  12.             //储存数据  
  13.             function setInfo(name) {  
  14.                 var storage = window.sessionStorage;  
  15.                 storage.setItem('name', name);  
  16.             }  
  17.             //显示数据  
  18.             function shows() {  
  19.                var storage = window.sessionStorage;  
  20.                var str = "your name is " + storage.getItem("name");  
  21.                document.getElementById("text").value = str;  
  22.             }  
  23.          script>  
  24.     head>  
  25.     <body>  
  26.          <input type="button" value="Login" onclick="submit()" />  
  27.          <input type="text" name="text" id="text" />  
  28.          <input type="button" value="show" onclick="shows()" />  
  29.          <a href="text.html" target="_blank">点击打开a>  
  30.     body>  
  31.     html>span>  
       text.html页面如下:

[html]  view plain  copy
  1. <span style="font-size:14px;">     >  
  2.      <html lang="en">  
  3.      <head>  
  4.          <meta charset="UTF-8">  
  5.          <title>Titletitle>  
  6.      head>  
  7.      <body>  
  8.          <script>  
  9.              var storage = window.sessionStorage;  
  10.              alert(storage.getItem("name"));  
  11.          script>  
  12.      body>  
  13.      html>span>  

      打开index.html页面的结果如下:

                      

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

       <2>只有在当前页面打开的链接,才可以访sessionStorage的数据;

       还记准备好的那个text.html页面吗,这个时候轮到它发挥自己的作用了。为了验证,我们接着上面的步骤,打开text.html结果如下:

                          

       可以看到,这个值为null,无法得到”name“的值。现在,关闭这个text.html页面,通过index.html页面中的点击打开链接,可以看到如下的结果:

                           

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

       <3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

       上述两种方式,经过测试,事实确实如此。感兴趣的同学,可以真实的测试下结果。关于localStorage和sessionStorage的不同之处,就不再做总结了。

       总之,使用的时候,注意以上提到的几点,在使用的时候可以避免很多没必要踩的坑。关于本文有什么不到的地方,欢迎留言批评和指正,谢谢。

你可能感兴趣的:(LocalStorage和sessionStorage之间的区别)