• Web存储

    目录

    什么是 HTML5 Web 存储?

    方法

    cookie

    webStorage

    会话存储 sessionStorage

    本地存储localStorage

    什么是 HTML5 Web 存储?

    使用HTML5可以在本地存储用户的浏览数据。

    早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

    数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

    方法

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   Document
    8.   
    11.

    这个页面我们先不关闭，再来创建一个html网页，使用cookie存储数据，打开第二个页面

    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   Document
    8.   
    11.

    我们发现cookie中两个网页的存储信息都能得到，可以得出cookie存储的特点为:

    产生于服务器，保存在客户端，同一服务器的cookie数据是共享的，数据最大不超过4KB

    webStorage

    会话存储 sessionStorage
    1. DOCTYPE html>
    4.   
    5.   
    6.   
    7.   Document
    10.
       

    我们关闭网页后，将存数据的两行代码注释掉(不注释得话再次打开网页相当于又存数据)，再次打开网页，可以发现数据已经没了

    会话存储的特点为:针对于选项卡和浏览器，当选项卡和浏览器关闭时，会话就失效，数据可以达到5-10MB

    本地存储localStorage
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <script>
    11.     // 本地存储
    12.     localStorage.setItem('name','jamie');
    13.     localStorage.setItem('age','20');
    14.     // vuex 如何进行持久化存储 永久化存储
    15.     console.log(localStorage.getItem('name'));
    16.     localStorage.removeItem('age')
    17.     // 删除全部
    18.     // localStorage.clear()
    19.   </script>
    20. </body>
    21. </html>

    我们关闭网页后，将存数据的两行代码注释掉(理由同上)，再次打开网页，发现数据还是存在。

    本地存储的特点为:将数据存储到本地，即使关闭浏览器和选项卡数据依然存在，除非手动删除，数据可以达到5-10MB

  • 相关阅读:
    Java:实现反转一个单链表算法（附完整源码）
    初识腾讯云
    程序员对代码注释可以说是又爱又恨又双标
    20. 数据库操作
    golang实现andflow流程引擎
    GAN笔记：利普希茨连续（Lipschitz continuity）
    Linux 实用的监控机器操作指令
    Hadoop超详细入门（一）介绍及安装
    网页的盒子模型是什么？怎么设置盒子样式
    基本微信小程序的新冠疫苗预约小程序
  • 原文地址：https://blog.csdn.net/qq_53866767/article/details/132743291