送信しないのなら変数に持たせておくべきものですか?
Cookie に値を保存すると、サーバに送信されるという以外にブラウザの永続域に保存されるという効果もあります。
ブラウザでリロードすると、javascript の変数はすべて初期化されますが、Cookie の値は残ります。
Cookie に値を保存することで「ユーザーがチェック中の項目やアクションの状態」など編集中の内容がリロードですべてリセットされるのを防ぐことができます。
しかし、Cookie にはサイズの制限があるので、注意が必要です。
参考: 最新ブラウザのクッキーの制限(数,サイズ)を調べてみた
また、サーバに送信されるので、通信に不要な負荷をかけることもデメリットの一つとなります。
このため、最近ではブラウザの永続域に保存したい場合は Cookie ではなく、 html5 の localstorageや sessionstorage を使うのが一般的です。
参考: ブラウザにデータを保存するlocalStorage(ローカルストレージ)の使い方
COOKIEか変数か、使い分けはどのようにすべきでしょうか?
上記の通り、リロードなどを超えて編集内容を復帰したいとき場合は Cookie に保存するのも良いかと思います。
ただし、永続的に値が保存されていることはいろいろなセキュリティ上の脆弱性の原因となります。
ユーザがログアウトボタンを信用してブラウザを閉じずに他のユーザと共有するようなケース(いまどき、少ないとは思います)では、前の人が編集中の内容が見えてしまうかもしれません。 Cookie にしろ localStorage にしろ、そこは注意が必要です。
また、悪意のあるスクリプトに cookie の値を盗まれないように外部のjavascript をロードしないようにするなどの注意が必要です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。