Cookie、LocalStorage和SessionStorage区别详解

Cookie、LocalStorage和SessionStorage区别详解

概念理解
Cookie它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage 是 HTML5 标准中新加入的技术,localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。
sessionStorage 与 localStorage 的接口类似,相较cookie一般存储大一些的数据,但保存数据的生命周期与 localStorage 不同。 Session的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
他们区别对比如下图所示
Cookie、LocalStorage和SessionStorage区别详解_第1张图片

应用场景

1、在开发中每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简,比较常用的一个应用场景就是判断用户是否登录。
2、针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录。
3、用到 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。
4、产生一些本地数据,localStorage是非常适用,遇到一些内容特别多的表单,优化用户体验,可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写发挥sessionStorage 的作用。

sessionStorage常用方法

用在同一个窗口(页面)下的数据可以共享

sessionStorage.setItem(key, value) :存储数据
sessionStorage.getItem(key) :获取数据
sessionStorage.removeItem(key) :删除数据
sessionStorage.clear() :删除所有数据

localStorage常用方法

用在多窗口(页面)共享数据,同一浏览器可以共享数据

localStorage.setItem(key,value) :存储数据
localStorage.getItem(key) :获取数据
localStorage.removeItem(key) :删除数据
localStorage.clear() :清空数据 / 删除所有数据

应用举例

<body>
    <input type="text" id="username" />
    <input type="checkbox" id="check" /> 记住用户名
body>
<script>
    var username = document.querySelector('#username');
    var check = document.querySelector('#check');
    check.checked = false;
    // 先看看localStorage里是否已有用户名,有就直接拿出来放到text框中,且复选框选中
    if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username');
        check.checked = true;
    }
    // 监听复选框是否改变
    check.addEventListener('change', function() {
        if (this.checked) {
            // 如果复选框被选中,则将用户名存入localStorage中
            localStorage.setItem('username', username.value);
        } else {
            // 复选框未被选中,则清空用户名
            localStorage.removeItem('username');
            check.checked = false;
        }
    })
script>

sessionStorage应用实例


<html>

<head>
  <meta charset="utf-8">
  <title>SessionStoragetitle>
  <script type="text/javascript">
    window.onload = function () {
      //首先获得body中的3个input元素
      var msg = document.getElementById("msg"); //文本框要输入的内容
      var getData = document.getElementById("getData"); //获取数据
      var setData = document.getElementById("setData"); //保存数据
      var removeData = document.getElementById("removeData"); //移除数据
      setData.onclick = function () //存入数据
      {
        if (msg.value) {
          sessionStorage.setItem("data", msg.value); //把data对应的值保存到sessionStorage
          alert("信息已保存到data字段中");
        } else {
          alert("信息不能为空");
        }
      }

      getData.onclick = function () //获取数据
      {
        var msg = sessionStorage.getItem("data");
        if (msg) {
          alert("data字段中的值为:" + msg); //把data对应的值弹出来
        } else {
          alert("data字段无值!");
        }
      }
      removeData.onclick = function () //移除数据
      {
        var msg = sessionStorage.getItem("data");
        //sessionStorage.clear(msg);  //清除本地所有的key/value
        sessionStorage.removeItem("data");
      }
    }
  script>
head>

<body>
  <input id="msg" type="text" />
  <input id="setData" type="button" value="保存数据" />
  <input id="getData" type="button" value="获取数据" />
  <input id="removeData" type="button" value="移除数据" />
body>

html> 

运行代码后
在这里插入图片描述
存储数据可以在控制台查看到数据
Cookie、LocalStorage和SessionStorage区别详解_第2张图片

你可能感兴趣的:(HTML5,html5)