Edit in JSFiddle

var res = document.getElementById("result");
var savebtn = document.getElementById("save");
var readbtn = document.getElementById("read");
var deletebtn = document.getElementById("delete");

var read_t = document.getElementById("read_title");
var read_h = document.getElementById("read_honbun");

if (!window.localStorage) {
    res.innerHTML = "localstorageに対応してません。";
    return;
}


//データを保存すう処理
savebtn.addEventListener("click", function() {
    var t = document.getElementById("title").value;
    var h = document.getElementById("honbun").value;
    //
    window.localStorage.setItem("title", t);
    window.localStorage.setItem("honbun", h);
    res.innerHTML = "内容を保存しました";
}, true);

//保存データを取り出す処
readbtn.addEventListener("click", function() {

    var t = window.localStorage.getItem("title");
    var h = window.localStorage.getItem("honbun");

    if ((t == null || t == "") || (h == null || h == "")) {
        res.innerHTML = "データを入力してください";
        return;
    }
    //
    read_t.innerHTML = t;
    read_h.innerHTML = h;
}, true);

//データを削除する処理
deletebtn.addEventListener("click", function() {
    //保存データを全部削除する場合
    window.localStorage.clear();
    res.innerHTML = "localStorageのデータを削除しました。";
}, true);

<div id="wrapper">
    <table>
        <tr><td>title : </td><td><input id="title" type="text" name="title" placeholder="タイトルを入れてください" /></td></tr>  
<tr><td>honbun : </td><td><textarea id="honbun" name="honbun" placeholder="内容を入れてください" ></textarea></td></tr> 
        <tr><td><input type="button" id="save" value="保存する"></td>
            <td><input type="button" id="read" value="読み出す" /></td>
            <td><input type="button" id="delete" value="保存データを削除する" /></td>
        </tr>        
    </table>
    <p id="result">保存されたかどうか</p>
    <p id="read_title">タイトル</p>
    <p id="read_honbun">本文</p>
    </div>
<div id="detail"><p>入力エリアに入力して保存ボタンを押した後に読み出すボタンをクリックすると、下に保存したデータが
表示される。</p>
<p>保存データを削除ボタンをクリックした後に読み出すボタンをクリックしてもデータがlocalStorageに残っていないので「データを入力してください」と表示される。</p></div>

div#wrapper{
    width:300px;
    margin:0 auto;
   padding-top:30px;
}

td{padding-bottom:10px}

p#read_title{
    padding-bottom:5px;
    margin-bottom:5px;
    border-bottom:1px solid #ccc;
}

p#result{
    padding-bottom:20px;
}
div#detail{
    margin-top:20px;
    border-top:4px #000 solid;
    font-size:12px;
    line-height:1.5;
    padding:10px;
}