Web存储 cookie - localStorage的()方法和sessionStorage的()方法

最新推荐文章于 2024-09-27 15:52:57 发布

神生漫长♚

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量940

点赞数 24

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_63873040/article/details/140251040

版权

Web存储

一. cookie

有时间限制存储大小几kb

二.localStorage和它的5个方法

没有时间限制，只要不手动清除就一直存在几Mb

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="set">set</button>
  <button id="get">get</button>
  <button id="remove">remove</button>
  <button id="clear">clear</button>
  <script>
    //登录鉴权
    //Web存储
    /*
     1.cookie：有时间限制  存储大小  几kb
     2.localStorage:  没有时间限制，只要不手动清除 就一直存在 几Mb
     3.sessionStorage:  没有时间限制，页面关闭后自动清除 几Mb
     
    */
  </script>
  <script>
    //localStorage
    //setItem(key ,value) value 只能是基本数据类型  方法   存储数据
    var btn = document.getElementById('set')
    btn.onclick = function () {
      console.log(localStorage);
      //存数据 setItem(key,value)
      console.log('测试');
      var obj = {
        set: 19
      }
      localStorage.setItem('name', '张三')
      localStorage.setItem('obj', JSON.stringify(obj))

    }

    //getItem()方法  获取数据
    //localStorage
    console.log(localStorage);
    var btn = document.getElementById('get')
    btn.onclick = function () {
      //获取数据 getItem(key)
      console.log('测试');
      var obj = {
        set: 19
      }
      console.log(localStorage.getItem('name'));
      console.log(JSON.parse(localStorage.getItem('obj')));
      //key()方法 通过索引获取key
      console.log(localStorage.key(0));      //   => name
      console.log(localStorage.key(1));      //   => obj
    }


    //removeItem()方法 移除数据
    var btn = document.getElementById('remove')
    btn.onclick = function () {
      //打印undefined 因为移出之后就没有这个key了
      console.log(localStorage.removeItem('name'));
    }


    // clear()方法  清除数据
    var btn = document.getElementById('clear')
    btn.onclick = function () {
      //打印undefined 因为移出之后就没有这个key了
      console.log(localStorage.clear('name'));
    }
  </script>
</body>

</html>

三.sessionStorage和它的5个方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="set">set</button>
  <button id="get">get</button>
  <button id="remove">remove</button>
  <button id="clear">clear</button>
  <script>
    //登录鉴权
    //Web存储
    /*
     1.cookie：有时间限制  存储大小  几kb
     2.sessionStorage:  没有时间现在，只要不手动清除 就一直存在 几Mb
     3.sessionStorage:  没有时间限制，页面关闭后自动清除 几Mb
     
    */
  </script>
  <script>
    //sessionStorage


    //setItem()  方法   存储数据
    var btn = document.getElementById('set')
    btn.onclick = function () {
      console.log(sessionStorage);
      //存数据 setItem(key,value)
      console.log('测试');
      var obj = {
        set: 19
      }
      sessionStorage.setItem('name', '张三')
      sessionStorage.setItem('obj', JSON.stringify(obj))

    }


    //getItem()方法  获取数据
    console.log(sessionStorage);
    var btn = document.getElementById('get')
    btn.onclick = function () {
      //取数据 getItem(key)
      console.log('测试');
      var obj = {
        set: 19
      }
      console.log(sessionStorage.getItem('name'));
      console.log(JSON.parse(sessionStorage.getItem('obj')));
      //key()方法 通过索引获取key
      console.log(sessionStorage.key(0));      //   => name
      console.log(sessionStorage.key(1));      //   => obj
    }


    //removeItem()方法 移除数据
    var btn = document.getElementById('remove')
    btn.onclick = function () {
      //打印undefined 因为移出之后就没有这个key了
      console.log(sessionStorage.removeItem('name'));
    }


    // clear()方法  清除数据
    var btn = document.getElementById('clear')
    btn.onclick = function () {
      //打印undefined 因为移出之后就没有这个key了
      console.log(sessionStorage.clear('name'));
    }
  </script>
</body>

</html>