记录链接单击，然后保存到本地存储

Recording a link click then saving to local storage

本文关键字：存储 保存 然后 链接 单击 记录      更新时间：2023-09-26

这是记录链接单击然后保存到本地存储然后在div中显示带有链接的图像的正确代码吗？

<script>
    var links = [ 'one': 1, 'two': 2, 'three': 3 ];
    function saveLink(that){
        links[links.length] = that.element.src;
        document.getElementById('linkList').innerHTML += that.element.src+"<br>";
        localStorage.setItem('links', JSON.stringify(testObject));
    }
    </script>
    <img src="http://domain.com/image.png" onclick="saveLink(this);" />

    <div id='linkList'>
    <script>
        var retrievedObject = localStorage.getItem('links');
    console.log('retrievedObject: ', JSON.parse(retrievedObject));
    </script></div>

不，这不是"在div 中显示带有链接的图像"的正确方法，console.log将登录到控制台，因为它的名称表明不要在 DOM 中创建元素。由于您的问题标记为jQuery，因此我将假设您将其与我的答案一起使用。

//Assuming you want the click handler to be attached to all images on the page
$('img').click(function(){
    $('#linkList').append('<a href="' + $(this).attr('src') +'">Image</a>')   
});

这将附加一个新的<a>标签，该标签是您单击的图像的链接。

这将为您提供如下新代码

<script>
    $(document).ready(function () {
        //Assuming you want the click handler to be attached to all images on the page
        $('img').click(function () {
            $('#linkList').append('<a href="' + $(this).attr('src') + '">Image</a>')
        });
    });
</script>
<img src="http://domain.com/image.png" />
<div id='linkList'>
</div>
相关文章：