0

What I am trying to do is make an application that once the user has logged in, a session is started. The user then clicks on a 'Record Journey' button and then the user browses the web. Once they return to my page it will display the pages that they have just visited.

Would using html5 local-storage be the best option when trying to store the user's page history? And does it even allow me to do this? If not, what alternatives are available?

Thank you in advance.

user1199649
  • 39
  • 3
  • 9

2 Answers2

1

There's no sane way to read the user's history using JavaScript in a web page.

If your "application" is a browser extension, then this is possible, using one of the APIs as exposed by the environment (eg chrome.history).

When the "application" is used to track history on web pages you own, then that's possible. localStorage would indeed be a good choice, since the persistent data does not add overhead to web requests. Don't forget that the the storage size is limited.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • Thanks for the reply, I have looked at some of the documentation for localStorage, however I haven't found how I would record pages visited by the user. Could you recommend a function? – user1199649 Apr 11 '12 at 15:30
  • @user1199649 Depends on your use case. What exactly do you want to track? Domains/paths only? Or also including query strings? What are you going to do with the data? Keep in mind that the key-pair values of `localStorage` are **strings**. So, in order to do something useful with it, you usually have to use `JSON`. See also:http://stackoverflow.com/tags/local-storage/info – Rob W Apr 11 '12 at 15:33
  • For now I just need to store the domain/path names, I will then display this data in a journey type format (first page visited, then second page visited and so on). – user1199649 Apr 11 '12 at 15:55
  • `var journey = JSON.parse(localStorage.getItem('journey'))||[];journey.push(location.protocol + '//' + location.host + location.pathname);localStorage.setItem('journey', JSON.stringify(journey));`. Replace `location.protocol ... location.pathame` with `location.href` if you want to also include the query string and hash. – Rob W Apr 11 '12 at 16:00
  • Thanks that does the trick, however when I try to insert this data into my menu: Using: document.getElementById("menu_container").write(journey); It doesn't seem to insert any data. – user1199649 Apr 11 '12 at 16:29
  • To read the value (array), use `JSON.parse(localStorage.getItem('journey'));`. – Rob W Apr 11 '12 at 17:34
  • Sorry to be a nuisance, but how would I implement this across multiple pages on my site. Would I just copy and paste the var journey code on each page? – user1199649 Apr 12 '12 at 14:21
  • @user1199649 Yes, provided that all pages are hosted at the same domain. – Rob W Apr 12 '12 at 14:22
0

I would recommend you to use locache - A JavaScript caching framework for client side caching in the browser using localStorage - gracefully degrades when the browser doesn't support localStorage.

https://github.com/d0ugal/locache

codef0rmer
  • 10,284
  • 9
  • 53
  • 76