Hướng dẫn tạo nút bật tắt đèn sử dụng localStorage

Vào một trang mà cứ mãi một giao diện lâu rồi cũng thấy chán, ta nên tạo thêm một điểm nhấn nào đó cho người dùng có nhiều lựa chọn tương tác hơn. Trong bài viết này tôi sẽ cùng các bạn đi tạo nút bật tắt đèn sử dụng localStorage

Bài toán đặt ra: khi tôi vào trang của bạn, nó đang là giao diện trên nền trắng → sau đó tôi muốn nó chuyển sang chế độ nền đen, ok tôi gạt nút sang nền đen → tiếp theo tôi chuyển sang 1 bài viết khác trên trang của bạn → nó lại trở lại nền trắng vì đã chuyển sang phiên làm việc khác.

Vì vậy để cho chuyên nghiệp hơn ta sẽ sử dụng localStorage để "nhớ" tùy chọn của người dùng, nó cũng hoạt động tựa như cookies. Tùy chọn của bạn sẽ luôn được ghi nhớ kể cả khi bạn tắt trình duyệt, nó chỉ mất khi bạn clear localStorage, như vậy chắc đã đủ độ chuyên nghiệp và quý tộc rồi !

Trong bài viết này tôi sẽ thiết kế nút chuyển dạng checkbox switch ẩn hiện khi hover chuột vào

Code HTML trước thẻ mở <body...>

<a class='_hs' href='javascript:void(0)'>
    <span class='_hs-content'>
        <input class='_sis' id='_ts' name='set-name' type='checkbox'/>
        <label class='_sls' for='_ts'/>
    </span>
</a>

CSS

._hs,
._hs-content {
    border-radius: 3px 0 0 3px
}

._hs {
    background-color: #7d026d;
    box-shadow: rgba(0, 0, 0, .2) 0 4px 10px;
    position: fixed;
    z-index: 444;
    padding: 0;
    opacity: 1;
    top: 60px;
    right: -45px;
    transition: all .4s
}

._hs:hover {
    right: 0
}

._hs-content {
    display: block;
    width: 45px;
    height: 40px;
    background: #fff;
    margin-left: 4px;
    margin-right: 0;
    position: relative
}

._sis {
    display: none
}

._sls {
    position: absolute;
    cursor: pointer;
    font-weight: 700;
    text-align: left;
    top: 20px;
    left: 4px
}

._sls:after,
._sls:before {
    content: "";
    position: absolute;
    margin: 0;
    outline: 0;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

._sls:before {
    left: 1px;
    width: 34px;
    height: 14px;
    background-color: #9E9E9E;
    border-radius: 8px
}

._sls:after {
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084)
}

._sis:checked+._sls:before {
    background-color: rgba(161, 111, 199, .8)
}

._sis:checked+._sls:after {
    background-color: #7d026d;
    -ms-transform: translate(80%, -50%);
    -webkit-transform: translate(80%, -50%);
    transform: translate(80%, -50%)
}

JS đặt ngay bên dưới đoạn code HTML bên trên

<script>//<![CDATA[
$(function() {
    // bắt sự kiện checkbox để add/remove class
    $("#_ts").on("change", function() {
        if ($(this).is(":checked")) {
            localStorage.setItem("dark", "true"); // lưu lại tùy chọn
            $("body").addClass("dark");
        } else {
            localStorage.setItem("dark", "false");
            $("body").removeClass("dark");
        }
    });

    // xử lý trường hợp chuyển trang
    var r = localStorage.getItem("dark"); // get value
    if (null != r) {
        if ("true" == r) {
            $("#_ts").prop("checked", true); // checked
            $("body").addClass("dark");
        } else {
            $("#_ts").prop("checked", false); // unchecked
            $("body").removeClass("dark");
        }
    }
});
//]]></script>

Đến đây bạn mới chỉ xong 1 nửa chặng đường thôi, nhiệm vụ bây giờ của bạn là tự viết css cho trường hợp tắt đèn (với theme light) hoặc bật đèn (với theme dark)

Theo code js như trên, code css sẽ luôn bắt đầu bằng body.dark #selector{} ví dụ

Lần lượt viết thêm css cho đến khi nào màu sắc hòa hợp thì thôi, cái này tự bạn phải làm thôi không ai làm sẵn cho được 😀

Như vậy tôi đã trình bày xong cho bạn cách tạo nút bật tắt đèn sử dụng localStorage, giúp cho website thêm "động"

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !