Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why is my script not saving?

    Im trying to make the contacts save using localStorage.
    But its not saving in any browser..will someone help me

    Edit: i cant get this to be in proper form on this forum..someone help me with that so you all can read it easier

    [html]
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Contacts</title>

    <style>
    a { color: #0068D2; cursor: pointer; }
    a:link, a:visited { text-decoration: none; color: #0068D2; }
    a:hover, a:active { text-decoration: underline; color: #0068D2; }
    body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

    #contacts-table { border-collapse: collapse; }
    #contacts-table, #contacts-table th, #contacts-table td { padding:
    8px 16px; text-align: left; border: 0px solid #B9BABE; }
    #contacts-table th { font-weight: bold; font-size: 14px; color: #29344B; }
    #contacts-table td { color: #000; }
    #contacts-table tr:nth-child(2n) { background: #E8EDFF; }

    #contacts-form { padding: 10px; }
    .text input, .button input { padding: 5px; margin: 0; border: 1px
    solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px;
    border-radius: 2px; }
    #contacts-form .item { margin: 3px 0; }
    #contacts-form label, #contacts-form .field { display: inline-block;
    color: #0C0B07; }
    #contacts-form label { width: 110px; font-weight: bold; text-align:
    right; color: #666; }
    #contacts-form .text input { width: 176px; padding: 3px; }
    #contacts-form .button { display: inline-block; }
    #contacts-form .button-wrapper { padding-left: 113px; }
    .button input { padding: 4px 8px; color: #343434; background-color:
    #fdfdfd; background: -moz-linear-gradient(#fdfdfd, #e1e1e1);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd),
    to(#e1e1e1)); }
    .button-default input { font-weight: bold; color: #fff;
    background-color: #7ca0c7; background: -moz-linear-gradient(#acc6e1,
    #7ca0c7); background: -webkit-gradient(linear, 0 0, 0 100%,
    from(#acc6e1), to(#7ca0c7)); border-color: #5b80b2; }
    </style>
    </head>
    <body>
    <h1>Contacts</h1>
    <table id="contacts-table">
    <tr id="contacts-head">
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
    <th>Email</th>
    <th>Actions</th>
    </tr>
    </table>

    <form id="contacts-form">
    <div class="item text">
    <label>First name:</label>
    <div class="field"><input type="text" name="first_name" /></div>
    </div>
    <div class="item text">
    <label>Last name:</label>
    <div class="field"><input type="text" name="last_name" /></div>
    </div>
    <div class="item text">
    <label>Email:</label>
    <div class="field"><input type="text" name="email" /></div>
    </div>
    <div class="button-wrapper">
    <div class="item button">
    <div class="field"><input type="button" id="contacts-op-discard"
    value="Discard" /></div>
    </div>
    <div class="item button button-default">
    <div class="field"><input type="submit" id="contacts-op-save"
    value="Save" /></div>
    </div>
    </div>
    <input type="hidden" name="id_entry" value="0" />
    </form>

    <script>
    var Contacts = {
    index: window.localStorage.getItem("Contacts:index"),
    $table: document.getElementById("contacts-table"),
    $form: document.getElementById("contacts-form"),
    $button_save: document.getElementById("contacts-op-save"),
    $button_discard: document.getElementById("contacts-op-discard"),

    init: function() {
    // initialize storage index
    if (!Contacts.index) {
    window.localStorage.setItem("Contacts:index", Contacts.index = 1);
    }

    // initialize form
    Contacts.$form.reset();
    Contacts.$button_discard.addEventListener("click", function(event) {
    Contacts.$form.reset();
    Contacts.$form.id_entry.value = 0;
    }, true);
    Contacts.$form.addEventListener("submit", function(event) {
    var entry = {
    id: parseInt(this.id_entry.value),
    first_name: this.first_name.value,
    last_name: this.last_name.value,
    email: this.email.value
    };
    if (entry.id == 0) { // add
    Contacts.storeAdd(entry);
    Contacts.tableAdd(entry);
    }
    else { // edit
    Contacts.storeEdit(entry);
    Contacts.tableEdit(entry);
    }

    this.reset();
    this.id_entry.value = 0;
    event.preventDefault();
    }, true);

    // initialize table
    if (window.localStorage.length - 1) {
    var contacts_list = [], i, key;
    for (i = 0; i < window.localStorage.length; i++) {
    key = window.localStorage.key(i);
    if (/Contacts:\d+/.test(key)) {
    contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
    }
    }

    if (contacts_list.length) {
    contacts_list
    .sort(function(a, b) {
    return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
    })
    .forEach(Contacts.tableAdd);
    }
    }
    Contacts.$table.addEventListener("click", function(event) {
    var op = event.target.getAttribute("data-op");
    if (/edit|remove/.test(op)) {
    var entry = JSON.parse(window.localStorage.getItem("Contacts:"+
    event.target.getAttribute("data-id")));
    if (op == "edit") {
    Contacts.$form.first_name.value = entry.first_name;
    Contacts.$form.last_name.value = entry.last_name;
    Contacts.$form.email.value = entry.email;
    Contacts.$form.id_entry.value = entry.id;
    }
    else if (op == "remove") {
    if (confirm('Are you sure you want to remove "'+
    entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
    Contacts.storeRemove(entry);
    Contacts.tableRemove(entry);
    }
    }
    event.preventDefault();
    }
    }, true);
    },

    storeAdd: function(entry) {
    entry.id = Contacts.index;
    window.localStorage.setItem("Contacts:index", ++Contacts.index);
    window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
    },
    storeEdit: function(entry) {
    window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
    },
    storeRemove: function(entry) {
    window.localStorage.removeItem("Contacts:"+ entry.id);
    },

    tableAdd: function(entry) {
    var $tr = document.createElement("tr"), $td, key;
    for (key in entry) {
    if (entry.hasOwnProperty(key)) {
    $td = document.createElement("td");
    $td.appendChild(document.createTextNode(entry[key]));
    $tr.appendChild($td);
    }
    }
    $td = document.createElement("td");
    $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id
    +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id
    +'">Remove</a>';
    $tr.appendChild($td);
    $tr.setAttribute("id", "entry-"+ entry.id);
    Contacts.$table.appendChild($tr);
    },
    tableEdit: function(entry) {
    var $tr = document.getElementById("entry-"+ entry.id), $td, key;
    $tr.innerHTML = "";
    for (key in entry) {
    if (entry.hasOwnProperty(key)) {
    $td = document.createElement("td");
    $td.appendChild(document.createTextNode(entry[key]));
    $tr.appendChild($td);
    }
    }
    $td = document.createElement("td");
    $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id
    +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id
    +'">Remove</a>';
    $tr.appendChild($td);
    },
    tableRemove: function(entry) {
    Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
    }
    };
    Contacts.init();
    </script>
    </body>
    </html>
    [/html]
    Last edited by ceerup; 06-15-2012 at 04:15 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    621
    Thanks
    1
    Thanked 20 Times in 20 Posts
    You can't save to a file except using ActiveX in Internet Explorer.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •