使用SessionStorage和localstorage存储数据超级全局变量-云BLOG

使用SessionStorage和localstorage存储数据

sessionStorage与localStorage是html5的新特性，可以在浏览器中存储数据

sessionStorage当前会话有效，也就是当前页面有效，页面关闭后，数据就会丢失

localStorage就是长期有效，只有清除缓存或者数据时，才会被清除

使用这两个属性，相对方法一，就简单了很多

下面是列表页面代码，使用了sessionStorage，localStorage的使用方法与sessionStorage的使用方法是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
    <tr>
        <td class="test">我是1</td>
        <td id="id1">1</td>
    </tr>
    <tr>
        <td class="test">我是2</td>
        <td id="id2">2</td>
    </tr>
    <tr>
        <td class="test"> 我是3</td>
        <td id="id3">3</td>
    </tr>
    <tr>
        <td class="test">我是4</td>
        <td id="id4">4</td>
    </tr>
</table>
 
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    
    $(".test").click(function () {
        var id =  $(this).siblings("td").html();  //获取兄弟td元素中的值
        sessionStorage.setItem("id",id);          //将数据存入sessionStorage
        location.href = "detial.html";            //页面跳转
    });
    
</script>
</html>

获取方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="test">测试</h1>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
   $("#test").html(sessionStorage.getItem("id"))   //从sessionStorage中获取数据
   sessionStorage.removeItem("id");                //使用后移除该数据
</script>
</html>

使用cookie存储数据

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。

它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”

这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

此处也可以使用cookie来存储想要传递的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<table id="test123">
    <tr>
        <td class="test">我是1</td>
        <td id="id1">1</td>
    </tr>
    <tr>
        <td class="test">我是2</td>
        <td id="id2">2</td>
    </tr>
    <tr>
        <td class="test"> 我是3</td>
        <td id="id3">3</td>
    </tr>
    <tr>
        <td class="test">我是4</td>
        <td id="id4">4</td>
    </tr>
</table>
 
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
 
    $(".test").click(function () {
        var id =  $(this).siblings("td").html();  //获取兄弟td元素中的值
        var date = new Date();
        date.setDate(date.getDate()+7);           //设置cookie存储数据的时间
        document.cookie = "id="+id+";expirse="+date;
        location.href = "detial.html";            // 页面跳转
    });
  
</script>
</html>

方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="test">测试</h1>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    
   $("#test").html(getCookie("id"))
   
   function getCookie(name){
       var strcookie = document.cookie;//获取cookie字符串
       var arrcookie = strcookie.split("; ");//分割
       // 遍历匹配
       for ( var i = 0; i < arrcookie.length; i++) {
           var arr = arrcookie[i].split("=");
           if (arr[0] == name){
               return arr[1];
           }
       }
       return "";
   }
</script>
</html>

Session与Cookie与SessionStorage

Session

存在服务器的一种用来存放用户数据的类HashTable结构。

session称为会话信息，位于web服务器上，主要负责访问者与网站之间的交互，当访问浏览器请求http地址时，将传递到web服务器上并与访问信息进行匹配，当关闭网站时就表示会话已经结束，网站无法访问该信息了，所以它无法保存永久数据，我们无法访问以及禁用网站

对会话session的认识一般都是从后台的session开始的，比如Java的session，它是基于往cookie写入一个JSESSIONID来实现的，所以，只要你不是打开一个隐身窗口，无论你开多少个标签页，不同标签页之间都会被认为是一个session，你在这个标签页登录了，新开一个标签输入地址，仍然是登录状态。

是服务器在本地机器上存储的小段文本并随每一个请求发送至同一服务器，是在客户端保持状态的方案。

位于用户的计算机上，用来维护用户计算机中的信息，直到用户删除。

SessionStorage

webstorage包含SessionStorage与localStorage

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

Session与SessionStorage区别

HTML5中的这个sessionStorage和传统后台的session并不完全是同一个东西，主要是在多个标签页数据是否会共享的问题上的不同。

Session底层实现是cookie

参考链接：

https://baijiahao.baidu.com/s?id=1619095369231494766&wfr=spider&for=pc

https://blog.csdn.net/liyifan687/article/details/80077928

https://segmentfault.com/a/1190000012057010

http://blog.haoji.me/aboute-session-storage.html

目录CONTENT

使用SessionStorage和localstorage存储数据超级全局变量