HTML 客户端浏览器上存储数据的机制是什么

服务器端存储将数据存储在服务器上（例如外部数据库），而客户端存储允许用户在客户端（例如用户的浏览器）上存储数据。

客户端存储由JavaScript API组成，它允许您在客户端（即用户的计算机）上存储数据，然后在需要时检索数据。这有很多不同的用途，例如：

个性化站点偏好（例如：显示用户选择的自定义小部件、颜色方案或字体大小）。
保持之前的站点活动（例如：保存以前会话的购物车内容，并记住用户以前是否已登录）。
将由Web应用程序生成的文档保存在本地以供离线使用。
将数据和资源保存在本地，以便用户下载速度更快、成本更低，或在没有网络连接的情况下使用。

在客户端浏览器中存储数据的两种方式是Web存储和Cookie。它们解释如下：

Web存储： 借助Web存储，Web应用程序可以在用户的浏览器中本地存储数据。在每次服务器请求期间，数据以Cookie的形式存储。

优点：

Web存储更安全，可以本地存储大量数据，而不会影响网站性能。
存储限制更大（至少为5MB），并且信息永远不会传输到服务器。
同一数据由来自相同源的页面访问。

以下是第一个完全支持Web存储的浏览器版本：

Chrome：4.0
Firefox：3.5
Safari：4.0
Opera：11.5
Internet Explorer/Edge：8.0

HTML Web存储对象： HTML Web存储有两个对象用于在客户端存储数据：

window.localStorage：数据存储没有过期日期。
window.sessionStorage：它在一个会话中存储数据（浏览器选项卡关闭时数据丢失）。

首先检查localStorage和sessionStorage的浏览器支持：

Javascript

if (typeof (Storage) !== "undefined") { 
    // This is Code for localStorage/sessionStorage. 
} else { 
    // No Web Storage support is there 
}

localStorage 对象： localStorage 对象存储的数据没有过期日期。即使关闭浏览器，数据也不会被删除。

sessionStorage 对象： sessionStorage 对象只会存储一个会话的数据。每当用户关闭特定的浏览器标签页时，数据就会被删除。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div id="result"></div> 
    <script> 
        if (typeof (Storage) !== "undefined") { 
            localStorage.setItem("name", "Geek"); 
            document.getElementById("result").innerHTML =  
              localStorage.getItem("name"); 
        } else { 
            document.getElementById("result").innerHTML =  
              "your browser does not support Web Storage..."; 
        } 
    </script> 
</body> 
  
</html>

输出:

Geek

HTML中的Cookies： Cookies是存储在计算机上的小型文本文件中的数据。它们被发明出来用于记住用户的信息。因为当web服务器将数据发送到浏览器时，如果由于任何外部因素而关闭，则服务器会忘记关于用户的所有信息。

当用户访问网页时，他的数据以cookie的形式存储。如果同一用户再次访问该网页，则网页会记住用户并提供与先前搜索项目相关的内容。这些cookie在Web浏览器和Web服务器之间交换。cookie被保存为名称-值对，如下所示：

username = geek

<meta>标签可以用于在客户端存储Cookie。

示例： 在下面的示例中，名称字段中输入的值将作为Cookie存储在浏览器中。

HTML

<html> 
  
<head> 
    <script type="text/javascript"> 
         < !-- 
            function Cookie() { 
                if (document.myform.customer.value == "") { 
                    alert("Enter some value"); 
                    return; 
                } 
                cookievalue = escape(document.myform.customer.value) + ";"; 
                document.cookie = "name=" + cookievalue; 
                document.write("Setting Cookies: " +  
                               "name=" + cookievalue); 
            } 
         //--> 
    </script> 
  
</head> 
  
<body> 
  
    <form name="myform" action=""> 
        Enter name: <input type="text" name="customer" /> 
        <input type="button" value="Set Cookie" 
               onclick="Cookie();" /> 
    </form> 
  
</body> 
  
</html>

输出:

HTML 客户端浏览器上存储数据的机制是什么