将文本添加到textarea的Javascript，然后将textarea保存为cookie

Question

My client want a site displaying his products online, but he didnt want an ecommerce site since its the number of product he has is very low.

I want to make a button on each product that when a user click will store it inside a cookie. What i come up with is that i make a hidden textarea inside the page and when the user click the order button on each product, it will be added to the text area and saved into a cookie simultaneously. Then when the user go to the order page, the orders will be loaded into a textarea.

The javascript part i found on a page online. Below is my code;

<div id="hide" style="display: none;">
        <textarea id="myContent2" name="myContent2"></textarea>
        <a onClick="addContent('myDiv2', document.getElementById('myContent2').value); setCookie('content', document.getElementById('myContent2').value, 7);">
        <br><br>
        <div id="myDiv2" style="font-weight: bold;"></div>

</div>

<script type="text/javascript">
    function addContent(divName, content) {
        document.getElementById(divName).innerHTML = content;
       }
</script>

<script type="text/javascript">
            function setCookie(c_name,value,expiredays) {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    }
    function getCookie(c_name) {
        if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end));
            document.getElementById('myDiv2').innerHTML = cookieContent;
        } 
        }
    }
    getCookie('content');
</script>

this is where the user click on the order button at the product page

<a onClick="addContent('myDiv2', document.myContent2.append("Product No 1") );  setCookie('content', document.getElementById('myContent2').value, 7);"> 

the thing is, when the user click the button, it wont send anything to the textarea and at the same time doesnt update the cookie. How can i fix this and how can i make sure that each time the user click order button, it will add new data into the textarea instead of erasing over it.

Answer 1

I would suggest you use a plugin for easy cookie access like this one or this one , then it is as easy as

function storeValue(key, value){
    $.cookie(key, value)
}

function getValue(key){
    return $.cookie(key);
}