javascript - 現在のスタイルシートの状態を保持する

Question

変更後のスタイルシートの状態を保持しようとしています。Cookie に値を格納することでそれを行っています。これが私のコードです。

var content = $("#content");
var state = $.cookie("layoutState");

if (state === "grid") {
    content.removeClass("content-list").addClass("content-grid");
    console.log($.cookie("layoutState"));
}

if (state === "list") {
    content.removeClass("content-grid").addClass("content-list");
    console.log($.cookie("layoutState"));
}

$("#list").on("click", function (e) {
    $.cookie("layoutState", "list");
    content.removeClass("content-grid").addClass("content-list");
    e.preventDefault();
})

$("#grid").on("click", function (e) {
    $.cookie("layoutState", "grid");
    content.removeClass("content-list").addClass("content-grid");
    e.preventDefault();
})

クリックイベントは完全に機能します。問題は、私が持っている2つのif条件にあります。何らかの理由で、ページの変更後に Cookie の値が変更されることがあります。Cookie の状態がクリック イベントでのみ変更されるようにしたいと考えています。

私が間違っていることはありますか？