时间戳

首页 > 解决方案 > 刷新后如何保持localStorage值（绿色行）？

javascript - 刷新后如何保持localStorage值（绿色行）？

问题描述

刷新后，我想看到一个绿色行点击一个。请帮我。

    $('.clickway').on('click', function(){
        $(this).closest("tr").css('background-color','green');
              localStorage.setItem("nanaxi", true);
    });
});

$(document).ready(function(){
    $('.button').on('click', function(){
        $(this).closest("tr").css('background-color','green');
        localStorage.setItem("nanaxi", true);
    });
}); ```

标签： javascripthtmljquerylocal-storage

解决方案

出于以下目的，我需要添加一些独特的方法来识别每个表行（尽管在您的小提琴中只有 1 行数据，但我怀疑应该有很多），因为id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}"如果没有正确的支持库/数据就不能等同。所以 - 我选择添加一个获取用户的数据集属性name（大概可以使用{{ listing.owner_name }}？）

我假设任何时候都可能存在不止一行active，并且应该在页面重新加载时恢复到这种状态。以下是所有香草 Javascript - 毫无疑问，如果需要，您可以转换为 jQuery 代码，但由于我不使用它，因此我无法提供任何指导。

javascript 自始至终都有解释性注释，但本质上，主表格主体内的每个表格单元都有一个事件侦听器。侦听器找到表行（n.parentNode 等）并在这种情况下使用数据集属性作为存储在 localStorage 中的 json 中的键。在页面加载时读取 localStorage，并处理这些name键以查找任何活动的表行。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            #main-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0 5px;
                font-size: 14px;
                background-color:black;
                
            }
            #main-table tbody {
                background-color: #18181a;
            }
            
            #main-table th, #main-table td{
                padding: 4px;
            }
            
            #main-table tr:hover {
                background-color: rgb(43, 43, 43);
            }
            
            #main-table th {
                background-color: #18181a;
            }
            #main-table a {
                color:#ffffff;
            }
            
            #main-table .avatar-cell {
                background-size: 48px !important;
                background-position: center !important;
                height: 48px;
                width: 48px;
                padding: 1px;
                cursor: pointer;
            }
             #main-table .item-cell {
                background-size: 48px !important;
                background-position: center !important;
                height: 48px;
                width: 48px;
                padding: 1px;
            }
            
            #main-table .copy-text-button {
                display: inline-block;
                border-radius: 4px;
                background-color: green;
                border: none;
                color: #FFFFFF;
                text-align: center;
                padding: 5px;
                width: 50px;
                transition: all 0.5s;
                cursor: pointer;
                margin: 5px;
            }
            #china {
                  background: url(https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg);
                  width: 20px;
                  height: 15px;
                  background-repeat: no-repeat;
            }
            #main-table .copy-text-button span {
                cursor: pointer;
                display: inline-block;
                position: relative;
                transition: 0.5s;
            }
            #main-table .listing-row.visited {
                background-color: #18181a;
                color: #dadada;
            
            }
            #main-table .button {
               background-color: #14cc74;
               border: none;
               color: black;
               padding: 3px 5px;
               text-align: center;
               text-decoration: none;
               font-size: 14px;
               margin: 4px 2px;
               cursor: pointer;
               border-radius: 2px;
               transition-duration: 0.1s;
              font-family: 'FiraGO', sans-serif;
            }
            #main-table .button:hover {
               background-color: #414141; /* Green */
               color: white;
            }
            .active{
                background:rgba(0,200,50,0.25)
            }
            th{color:white;background:rgb(80,80,80)!important;text-align:left;}
            td:nth-of-type(4){color:pink}
        </style>
    </head>
    <body>
        <table id="main-table">
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Actions</th>
                    <th>Vehicle</th>
                    <th></th>
                </tr>
                
                <tr data-name='Mike' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
                    <td>
                        <a class="clickway" htarget="_blank">Mike</a>
                    </td>
                    <td>
                        <center><a target="_blank"><button class="button">CLICK</button></a></center>
                    </td>
                    <td>
                        <a href="" target="_blank">Car</a>
                    </td>
                    <td>
                        <center> 100</center>
                    </td>
                </tr>
                
                <tr data-name='Sarah' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
                    <td>
                        <a class="clickway" htarget="_blank">Sarah</a>
                    </td>
                    <td>
                        <center><a target="_blank"><button class="button">CLICK</button></a></center>
                    </td>
                    <td>
                        <a href="" target="_blank">Hovercraft</a>
                    </td>
                    <td>
                        <center> 400</center>
                    </td>
                </tr>
                
                <tr data-name='Sally' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
                    <td>
                        <a class="clickway" htarget="_blank">Sally</a>
                    </td>
                    <td>
                        <center><a target="_blank"><button class="button">CLICK</button></a></center>
                    </td>
                    <td>
                        <a href="" target="_blank">Rocketship</a>
                    </td>
                    <td>
                        <center> 1080</center>
                    </td>
                </tr>
                
                <tr data-name='Rebecca' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
                    <td>
                        <a class="clickway" htarget="_blank">Rebecca</a>
                    </td>
                    <td>
                        <center><a target="_blank"><button class="button">CLICK</button></a></center>
                    </td>
                    <td>
                        <a href="" target="_blank">Helicopter</a>
                    </td>
                    <td>
                        <center> 4500</center>
                    </td>
                </tr>
                
            </tbody>
        </table>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                const _STORE='nanaxi';
                
                /*
                    Find all table cells within rows with class `listing-row` 
                    and assign an event handler to each. The `click` event will
                    find the parent table-row and use the dataset `name` attribute 
                    ( OR the ID perhaps if it is unique!!! ) as a KEY in the 
                    localStorage record.
                */
                document.querySelectorAll('.listing-row td').forEach( td=>{
                    td.addEventListener('click',function(e){
                        e.stopPropagation();
                        
                        if( e.target==e.currentTarget ){
                            let tr=e.target.parentNode;
                            
                            // read the localStorage or create empty Object literal.
                            let json=localStorage.getItem( _STORE )!=null ? JSON.parse( localStorage.getItem( _STORE ) ) : {};
                            
                            // check if the name exists as a key or add if it does not
                            // if it does exist, toggle the value between 1 & 0
                            if( !json.hasOwnProperty( tr.dataset.name ) ) json[ tr.dataset.name ]=1;
                            else json[ tr.dataset.name ]=1-json[ tr.dataset.name ];
                            
                            // save the localStorage and set the "active" class
                            localStorage.setItem( _STORE, JSON.stringify( json ) );
                            tr.classList.toggle('active');                          
                        }
                    })
                });
                
                
                /*
                    on page load, read the store if it exists and for every
                    name entry that is set as 1 mark the appropriate table
                    row (based upon data-name attribute or ID) as "active"
                    and apply the css class.
                */
                let json=localStorage.getItem( _STORE );
                if( json!=null ){
                    json=JSON.parse( json );
                    Object.keys( json ).forEach( name=>{
                        if( json[name]==1 ){
                            document.querySelector('tr[data-name="'+name+'"]').classList.add('active')
                        }
                    })
                }
            });
        </script>
    </body>
</html>

推荐阅读