赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
（ボタンを押すとcookieが読み込まれ、切り出した結果をここに表示します）
function load_cookie() {
var c_data,c_name,n,m,data;
//保存cookieの読込
c_data = document.cookie;
//cookie名
c_name = "sample_cookie=";
//cookie名からデータの切り出し
n = c_data.indexOf(c_name,0); //*1
if (n > -1) {
//cookie名があった場合
m = c_data.indexOf(";", n + c_name.length); //*2
if (m == -1) m = c_data.length; //*3
data = unescape(c_data.substring(n + c_name.length, m)); //*4
} else {
//cookie名がなかった場合
data = "no cookie"; //*5
}
}
*1：c_data（取り出したcookie全体が入っている）の内にあるc_name（cookie名）を探します。
変数nには、見つけた場合はその先頭位置を、見つからなかった場合は-1が代入されます。次のif文で条件分岐をしています。
*2：１つのcookieの区切りである「;」の位置を探します。
検索の先頭位置を「n + c_name.length」としています。これは、変数nにcookie名の最初の位置があるため、cookie名の長さを足して、データの始まり位置から探すという意味です。*4でデータの切り出しの時にも同じ先頭位置を使っています。
*3：「;」が見つからなかったとき、cookieの最後までがデータと見なします。cookieの内容を良く見ると最後のcookieには「;」はなく、区切りにだけ使われているからです。
*4：cookieから目的のデータを切り出しています。この時点でデコード処理も実行しています。
*5：cookieが見つからなかった場合に変数dataの初期値を決めておきます。
変数の設定がないまま後の処理で変数を参照するとエラーが発生しますので、必ず変数の値を設定しましょう。
cookieの保存で行った複数項目をまとめて保存した場合の読み込み方法です。
データの仕切りに文字を使っているので、読み込んだデータを切り分ける作業と、切り分けたデータを変数やフォームに振り分ける作業が必要になります。
function load_cookie() {
var c_data,c_name,n,m,data;
//保存cookieの読込
c_data = document.cookie;
//cookie名
c_name = "sample_cookie=";
//cookie名からデータの切り出し
n = c_data.indexOf(c_name,0);
if (n > -1) {
//cookie名があった場合
m = c_data.indexOf(";", n + c_name.length);
if (m == -1) m = c_data.length;
data = unescape(c_data.substring(n + c_name.length, m)).split("|"); //*1
for (n=0;n<10;n++) { //*2
document.getElementById("dataA" + n).value = data[n*2];
document.getElementById("dataB" + n).value = data[n*2+1];
}
} else {
//cookie名がなかった場合
data = "no cookie";
}
}
変更箇所を赤字で表示しています。
(*1) 変数dataに対して、split()を使って文字列を切り分けていますので、配列変数dataになります。
(*2) 配列変数dataからfor文を使ってデータを順次取り出しながら、２つずつフォームに書き出しています。既に変数に切り分けられているので、そのまま使用しても構いませんが、ここでは配列変数dataはローカル宣言されていますので注意が必要です。
配列変数dataを使っているということは、data[0]からdata[19]までの20個のデータがあるという想定でfor文が組まれています。
保存の時にすべての項目の後ろに「|」を足しているので、実際は21個のデータがあり、data[20]は空のデータとなっています。
このとき、data.lengthの値は21です。これは今回の保存時の処理によってできた若干の問題点です。
上記のように処理する個数が決まっている場合は問題ないのですが、保存時に個数が変動する場合、for文でdata.lengthを使って処理回数を求める場合にちょっとした工夫が必要になります。
data = unescape(c_data.substring(n + c_name.length, m)).split("|");
for (n=0;n<data.length-1;n++) {
（省略）
}
保存時に、最後のデータだけ仕切り文字を付けない工夫もできますが、それよりもこちらの方が簡単に対処できます。
また、cookieの中にデータの個数を記録して置く方法でも構いません。その時は、データの位置が変わらない最初の方に置いておくと確実に取り出せます。