SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to enter data into localStorage via a button

    I'd like to show a button on an HTML page that will grab the filename.html and title of the page and put them in localStorage. On a separate Bookmarks HTML page, I'll output all those rows, with a Delete button next to each. In this way, I could use localStorage to make Bookmark (Faves) links.

    However, I'm accustomed to adding data to localStorage when the user enters information into a text field, then taps a button which calls a function to write the content to localStorage (see example of function below). I'm not sure how to simply add a button to a page and it will write those two pieces of information to localStorage. Can this be done programmatically? How can JS determine the filename.html and <title> of a page and write it to localStorage?

    I have hundreds of pages I'd like to add this code to and I'm hoping I can to a search/replace (such as replace </head> with <script>code goes here</script></head>).

    I expect to use this entirely resident in an app, so no PHP or ASP, etc. Only HTML, CSS, and JS. No calls to an external server allowed in this scenario.

    A working example of writing to localStorage:
    (Please note that the HTML portion uses Jquery, but the new pages will not.)

    Code:
    function persistDataTrackListing()
    { "use strict";                
    var aboutTrackOne = document.getElementById('aboutTrackOne'); 
        localStorage.setItem('aboutTrackOne', aboutTrackOne.value);             
    var aboutTrackTwo = document.getElementById('aboutTrackTwo'); 
        localStorage.setItem('aboutTrackTwo', aboutTrackTwo.value); 
    }

    HTML Code:
    <li><a href="#track1"*data-transition="none" onchange="persistDataTrackListing()">Track 1</a></li>
    <li><input type="text" name="aboutTrackOne" id="aboutTrackOne" placeholder="Name of Track 1 (30 characters)" class="singleline" data-role="none" maxlength="30" onchange="persistDataTrackListing()"></li>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    How can JS determine the filename.html and <title> of a page and write it to localStorage?
    You can use the location object for that, specifically, location.href. As for the title, you can get it from document.title
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul! That should get me going!


Bookmarks

Posting Permissions

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