如何将保存的 localStorage Web 数据传递给 php 脚本？

Posted 2023-02-24

【中文标题】如何将保存的 localStorage Web 数据传递给 php 脚本？

【英文标题】：How can I pass saved localStorage web data to a php script?

【发布时间】：2013-04-09 04:24:49

【问题描述】：

好的，所以我在尝试找出如何将我保存在 localStorage 中的一些数据传递给我编写的 php 脚本时遇到了一些问题，因此我可以将其发送到服务器上的数据库.我之前确实找到了一些代码 (https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)，看起来它可以工作，但我没有运气。

这是我保存数据的代码，而不是试图通过我的 phpscript 传递它

function getLocation() 
        if (navigator.geolocation) 
            navigator.geolocation.getCurrentPosition(initialize, showError, takeSnap);
        
        else 
            alert("Geolocation is not supported by this browser.");
        
    

function initialize(position) 
        var lat = position.coords.latitude,
            lon = position.coords.longitude;

        var mapOptions = 
            center: new google.maps.LatLng(lat, lon),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker(
            position: new google.maps.LatLng(lat, lon),
            map: map,
            title: "Current Location"
        );
    

function showError(error) 
        switch (error.code) 
            case error.PERMISSION_DENIED:
                alert("User denied the request for Geolocation.");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("Location information is unavailable.");
                break;
            case error.TIMEOUT:
                alert("The request to get user location timed out.");
                break;
            case error.UNKNOWN_ERROR:
                alert("An unkown error occurred.");
                break;
        
    

function storeLocal(position) 
        if (typeof (Storage) !== "undefined") 
            var lat = position.coords.latitude,
                lon = position.coords.longitude;

            localStorage.latitude = lat;
            localStorage.longitude = lon;
        
        else 
            alert("Your Browser doesn't support web storage");
        

        return
    

    function snapShot() 
        if (navigator.geolocation) 
            navigator.geolocation.getCurrentPosition(storeLocal, showError);
        
        else 
            alert("Geolocation is not supported by this browser.");
        

        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.open("post", "snap.php?lat=" + localStorage.latitude + "&lon=" + localStorage.longitude, true);
        oReq.send();            
    

    function reqListener() 
        console.log(this.reponseText);
    

这是我编写的将值保存到数据库中的脚本

    <?php
    // Connecting to the database
    mysql_connect("localhost", "username", "password");
    mysql_select_db("db_name");

    $latitude = mysql_real_escape_string($_GET["lat"]);
    $longitude = mysql_real_escape_string($_GET["lon"]);

    // Submit query to insert new data
    $sql = "INSERT INTO locationsTbl(locID, lat, lon ) VALUES( 'NULL', '". $latitude ."', '". $longitude . "')";
    $result = mysql_query( $sql );

    // Inform user
    echo "<script>alert('Location saved.');</script>";

    // Close connection
    mysql_close();
    ?>

【参考方案1】：

怎么样：

oReq.open("get", "snap.php?lat=" + localStorage.latitude + "&lon=?" + localStorage.longitude, true);

（你也有localStorage.lon而不是.longitude）

由于值（字符串）在变量中，你需要将它们连接起来，而不是把它们放在字符串中。

此外，由于您似乎将这些内容传递给 PHP 以保存到数据库，从语义上讲，您应该使用 POST 请求...与 AJAX 请求的处理方式不同。

在你的PHP中，你需要使用：

$latitude = $_GET["lat"];
$longitude = $_GET["lon"];

实际获取随 GET 请求发送的值。尽管应该对这些值进行转义以避免 SQL 注入。

另外，我不确定您为什么要设置 AJAX 请求的 onload 属性。相反，使用onreadystatechange 属性...类似于：

oReq.onreadystatechange = function () 
    if (oReq.readyState === 4) 
        if (oReq.status > 199 && oReq.status < 400) 
            console.log("successful response");
         else 
            console.log("failed response: " + oReq.status);
        
    
;

.readyState 属性指的是它的状态，其中4 表示它已完成（响应已返回）。 .status 属性指的是 HTTP 状态代码。通常在200 和400 之间是好的。我知道我见过人们只检查200（不是范围）。

更新：

为了在请求中传递 POST 参数，您不要将它们附加到 URL - 您在 .send() 方法中传递它们。这是您的代码示例：

oReq.open("POST", "snap.php", true);
oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oReq.send("lat=" + encodeURIComponent(localStorage.latitude) + "&lon=" + encodeURIComponent(localStorage.longitude));

要在 PHP 中检索它们，您可以使用：

$latitude = $_POST["lat"];
$longitude = $_POST["lon"];

【讨论】：

是的，但我不确定如何在我的情况下使用 POST 请求，因为我没有从表单中获取字段的信息。它的工作方式是我在我的页面上创建了一个按钮。它有一个事件监听器，它正在寻找对图像的点击，然后抓取地理位置数据并将其保存。

@RenegadeScar 我了解，但您只需将oReq.open("get" 更改为oReq.open("post"。然后在 PHP 中，您使用 $_POST 而不是 $_GET

访问这些值

哦，我明白了。抱歉，我对 javascript 有点陌生，充其量只是一个普通程序。谢谢，我会试试看。

@RenegadeScar 没问题。只是GET、POST、PUT和DELETE有含义，你的操作似乎最适合POST。暂时不太重要，我只是想指出这一点。

非常感谢！我真的很感谢你的帮助 =)

【参考方案2】：

你有代码错误

应该是 oReq.onload = reqListener; oReq.open("get", "snap.php?lat="+localStorage.latitude+"&lon="+localStorage.lon, true); oReq.send();