web存储

最新推荐文章于 2023-06-17 00:21:47 发布

眾K

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量113

点赞数

分类专栏：技术文章标签：新H5

本文链接：https://blog.csdn.net/weixin_45148022/article/details/100083947

版权

技术专栏收录该内容

40 篇文章 0 订阅

订阅专栏

web存储

cookie存储

现在不用啦，存储大小为4K。

sessionStorage 会话级存储

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；
sessionStorage方法：
在这里插入图片描述

sessionStorage.setItem(“username”,”张三”);
sessionStorage.getItem(“username”);
sessionStorage.removeItem(“username”);
sessionStorage.clear();

localStorage 永远级存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage方法：
在这里插入图片描述

localStorage.setItem(“username”,”张三”);
localStorage.getItem(“username”);
localStorage.removeItem(“username”);
localStorage.clear();

localStorage与sessionStorage 最大的区别在于，使用sessionStorage保存数据只对当前窗口有效，这个窗口一旦关闭，数据也会被销毁。

使用场景：
保存皮肤样式表
网址之家记录用户常访问网站
简单购物数据存储

小结

HTML5两种存储技术，xxxxxStorage，一种为会话级别，数据保存后浏览器被关闭数据及销毁，
一种为永久存储，数据保存后，如果不是人为去删除，数据一直存在。两种存储技术使用根据需求进行选择。一般来说localStorage使用较多。

练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <button id="btn1">增加</button>
    <button id="btn2">获取</button>
    <button id="btn3">修改</button>
    <button id="btn4">删某一个</button>
    <button id="btn5">删除所有</button>

    <script>
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      var btn3 = document.getElementById("btn3");
      var btn4 = document.getElementById("btn4");
      var btn5 = document.getElementById("btn5");

      // 增
      btn1.onclick = function(){
        var json = {
          "name":"张珊",
          "age":18
        }
        localStorage.setItem("user1",JSON.stringify(json));
      }

      // 获取
      btn2.onclick = function(){
      console.log(localStorage.getItem("user1"));
      }

      // 修改
      btn3.onclick = function(){
        var json2 = {
          "name":"罗志祥",
          "age":42
        }
        localStorage.setItem("user2",JSON.stringify(json2));
      }

      // 删某一个
      btn4.onclick = function(){
   
        localStorage.removeItem("user2");
      }

      // 删除所有
      btn5.onclick = function(){
   
   localStorage.clear();
 }
    </script>
</body>
</html>

眾K

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web存储

cookie存储现在不用啦，存储大小为4K。sessionStorage 会话级存储sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；sessionStorage方法：sessionStorage.setItem(...
复制链接

扫一扫