Javascript Onclick Cookies Kullanımı

Arkadaşlar kolay gelsin. Javascript ile aram hiç iyi değil. Günlerdir araştırmama rağmen henüz bir sonuç alabilmiş değilim. Bilenlerinizin yardımcı olmasını rica ediyorum.

Sitemde sütunları gizlemek için aşağıdaki gibi bir kod yaptım:

<a href="#"onClick="$('.sol_kisim').toggle({}); return true;">Sol Kolonu Gizle</a> 

<a href="#"onclick="$('.sag_kisim').toggle({}); return true;">Sağ Kolonu Gizle</a>

Burada gördüğünüz üzere onclick kullandım. Bunu Cookie şeklinde tarayıcıya önbelleklemek istiyorum. Yani kullanıcı bir kolonu gizlediğinde ve sayfa değiştirdiğinde yaptığı değişiklik kaybolmasın. Sol kolonu gizle dediyse, göster diyene kadar gizli kalsın.

Bunun için aşağıdaki dosyayı siteme ekledim çağırdım:

<script type="text/javascript" src="sitem/js/jquery.cookie.js"></script>

Ondan sonra da:

<script type="text/javascript">
   $.cookie("onbellek"); 
   $.cookie("onbellek", ".sol_kisim") 
   $.cookie("onbellek", ".sol_kisim", {expires: 7}); 
</script>

Bu tarz bir kullanım yaptım. Ancak yine olmadı. Yardımcı olabilirseniz gerçekten çok memnun olurum.

Cookie yerine HTML5 ile gelen localStorage kullanabilirsin. Sana örnek bir kod yazdım.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
    #sag{ width:500px; height:300px; background-color:#ff0000; display:inline-block}
     #sol{ width:500px; height:300px; background-color:#ffd800;display:inline-block}
</style>

<div id="sol">SOL</div>
<div id="sag">SAĞ</div>
<p>
    <a href="#" id="btnsol">solu gizle</a>
    <a href="#" id="btnsag">sagi gizle</a>|
    <a href="#" id="btnsolgoster">solu goster</a>
    <a href="#" id="btnsaggoster">sagi goster</a>

</p>
<script>
    $(function () {
        if (localStorage.sol) {
            $('#sol').toggle();
        }
        if (localStorage.sag) {
            $('#sag').toggle();
        }
        $('#btnsol').click(function (e) {
            e.preventDefault();
            $('#sol').toggle();
            localStorage.setItem("sol", "gizli");
        })
        $('#btnsag').click(function (e) {
            e.preventDefault();
            $('#sag').toggle();
            localStorage.setItem("sag", "gizli");
        })
        $('#btnsolgoster').click(function (e) {
            e.preventDefault();
            $('#sol').toggle();
            localStorage.removeItem("sol");
        })
        $('#btnsaggoster').click(function (e) {
            e.preventDefault();
            $('#sag').toggle();
            localStorage.removeItem("sag");
        })
    })
</script>

Detaylı bilgiyi burada bulabilirsin: HTML5 Web Storage nedir? nasıl kullanılır?

Basitçe kullanıcı bilgisayarında bir bilgi saklamak istiyorsak localStorage ile şu şekilde yapıyoruz:

localStorage.setItem("Ad", "Deger");

localStorage ile sakladığımız veriyi okumak için

localStorage.Ad;

demek yeterli oluyor. localStorage ile saklanan veriyi silmek için

localStorage.removeItem("Ad");

gibi kullanabilirsin.

localStorage ile bilgiler kullanıcı tarayıcısında saklanıyor. localStorage, cookie'ye göre daha güvenli ve daha fazla veriyi saklayabilir. 

Ayrıca localStorage tüm modern tarayıcılar tarafından desteklenir.