I am still abit of a noob and I made a site with an admin panel where I made the option to change the price showed on the front page.
However I have made this with Localstorage and it works great but it probably wont show for other visitors right?
My current Localstorage code:
<script>
function save(){
var gpprice = document.getElementById('gpvalue').value;
localStorage.setItem("price", gpprice);
}
</script>
<script>
function save3(){
var gpprice3 = document.getElementById('gpvalue3').value;
localStorage.setItem("price3", gpprice3);
}
</script>
And to display it on the front page:
<script>
window.onload = function() {
document.getElementById("product-price1").innerHTML = "$" + localStorage.getItem('price') + "/M";
document.getElementById("product-price2").innerHTML = "$" + localStorage.getItem('price3') + "/M";
}
</script>
It works really good for me and I would like a similar system.
So I guess my question is how can I correct this oopsie? Should I use MySQL instead to store the value? Or is there a way to still use this?
No one else can access your localstorage data. You need to store it in a database.
Related
For the life of me I can’t figure this out grrr and wondering if someone could help…
My son is doing some html homework. We’re trying to put a page counter that will count and display the number of hits to a page. He’s got an index and three other pages. I’ve put this on each page:
<div class="page-count">
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("You've had "+ localStorage.pagecount + " hits.");
</script>
</div>
Problem is it counts all of the hits together rather than how many hits per page… how could I get this to count the hits on a single page rather than how many hits in total?
Thanks in advance.
localStorage is domain wide and its values are shared across your entire site, not just one page on that site. localStorage values are also only kept in users' browsers and not on the server hosting your website. Keep this in mind if you are building a page counter.
If you use localStorage to keep count, you will only be keeping count of a particular user's visits to that page from a specific computer.
If this is indeed the functionality you are looking for, you can make it work by giving each of your individual pages a separate key within the pagecount object.
Something like:
// If this is the first time someone has visited your site, you want
// to check to see if pagecount has been defined. If not, define the pagecount object.
!localStorage.pagecount ? localStorage.pagecount = {} : '';
var currentPage = window.location.href;
if(localStorage.pagecount[currentPage]){
localStorage.pagecount[currentPage] = Number(localStorage.pagecount[currentPage]) + 1;
}
else{
localStorage.pagecount[currentPage] = 1;
}
The above gives your pagecount object a key for every page that exists on your site.
Because localStorage works across all pages under the same domain they will count the same number.
If you'd like to differentiate them you could try something like this:
var url_segment = window.location.href.split('/');
var script_name = url_segment[url_segment.length - 1];
if (localStorage[script_name]) {
localStorage[script_name] = parseInt(localStorage[script_name]) + 1;
}
else {
localStorage[script_name] = 1;
}
document.write("You've had "+ localStorage[script_name] + " hits.");
Note that I did not want to use the entire path as my key, only my script name. You can most likely use the entire path, I just thought this was prettier.
I'm trying to redirect the parent window after the pop up is closed. Not a problem, but on one of the pages that calls the pop up, when it redirects it outputs the page into a table.
I know its just my companies horrible design, but to get ride of the bug I thought about just not redirecting IF you're on the problem page.
So, I went ahead and parsed the document.referrer variable and then just have redirect IF the string matches mine. Easy enough right? Nope, syntax is pretty solid, it just doesn't redirect...
<script language="javascript">
var prevPageName = ''
function getPageName()
{
prevPageName = (document.referrer.split('://')[1]).split('/')[2]);
}
function determineRedirect()
{
if(prevPageName === "mysalestasks.asp")
window.opener.document.location.href = "/dashboard";
}
</script>
Ok... so a user enters info into the journal field and hits submit, and a function gets called on the information they have submitted, which I call changeTextComment(). That function calls another function and so on as the info is formatted and placed in the cue, as in a Facebook commentary.
I need this information saved so it can be recalled later, in local storage, making the app not refresh every time I restart it. So...
<script>
function appCache() {
// Check browser support
// this is experimental for local storage...
more here: http://www.w3schools.com/html/html5_webstorage.asp
if (typeof(Storage) != "undefined") {
localStorage.setItem(para);
// Retrieve
document.getElementById("journal").innerHTML = localStorage.getItem(para);
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
};
</script>
So looking at the appCache function it seems like it might work except I need to identify what the key variable is that will be stored and then retrieved.
I think this is the variable userInput, as any time the user hits the 'add to journal' button this variable is used to store the user input and then put into the changeTextComment() function.
I am wondering if this is the simplest way to deal with this whole thing... I do not yet understand databases, but wondering if that would be easier to learn.
In this case, I would add the function Appcache() to the function changeText() such that it caches the variable and then how would I set it up to then feed the value of the variable's cached info into changeText() upon launch of the app?
Every submission to the journal will have a unique value.
Heres the ChangeTextComment() Function... still sorting out how to use classes in css to simplify these functions:
function changeTextComment(){
// to be modified from the above to change the location of the dump
var userInput = document.getElementById('userInput').value;
// get the input from the user
var panel = document.createElement("div"); // create a parent divider for everything
// assignment of attributes
panel.setAttribute("class","panel panel-default panel-body");
panel.setAttribute("id","panelBody");
var para = document.createElement("P");
var t = document.createTextNode(userInput);
para.appendChild(t);
// add comment area
var c = document.createElement("INPUT");
c.setAttribute("type", "text");
c.setAttribute("id", "comment");
c.setAttribute("placeholder", "comment here");
c.setAttribute("class", "form-control input-lg");
// add comment button attempt -- success <> now try to put it in the textarea
var d = document.createElement("INPUT");
d.setAttribute("type","button");
d.setAttribute("class","btn btn-info active pull-right");
d.setAttribute("onclick","commentThis()");
d.setAttribute("value","Add Comment");
panel.appendChild(para); // this is where a comments piece would go
// place the item
var destination = document.getElementById("journal")
//destination.insertBefore(Commentaryarea, destination.firstChild);
//destination.insertBefore(panel, destination.firstChild);
destination.insertBefore(panel, destination.firstChild);
panel.appendChild(c);
panel.appendChild(d);
document.getElementById("userInput").value = "";
document.getElementById("userInput").focus();}
</script>
<script>
function setText(a){
document.getElementById("userInput").value = a
document.getElementById("userInput").focus();
}
</script>
When you say "stored locally", do you mean stored in the visitors browser, i.e. with only themselves being able to see it and retrieve it? Or do you want other users to be able to see the data, and/or the commenter to be able to see it if they log in later from another location?
If it's the latter then you need to store it on the server side, and you're going to need a database for that. If all you need is to store journal entries then mongoDB is easy to set up with javascript, but if you have a lot of relations (journal entries being associated with users, comments on entries being associated with users and entries, ect) then perhaps an SQL database would suit you better.
I have tried many things but I'm not able to get a proper API which will return me the +1 count in google plus.
I have already tried using :-
Getting Counts for Twitter links, Facebook likes and Google +1 with Jquery and AJAX
Getting Google+ subscription count with jQuery
How do I get the counter of a google plus +1 button?
But none of them is giving me the answer.
Any thoughts....
Thanks :)
i just found out a very useful site to solve our problem. :) Thanks to him!
http://99webtools.com/script-to-get-shared-count.php
You could write your own function using the link you and jgillich mentioned. This would be slightly simplified with jQuery.
Here's a jsfiddle I made as an example. You'll probably have to use something like PHP to fetch from the site if you want to circumvent inter-domain issues. It could look something like this though (ignoring domains):
$('#myInput').keyup(function () {
var url = 'https://plusone.google.com/_/+1/fastbutton?url=' + encodeURIComponent($(this).val());
$.get(url,
function (data) {
var aggregate = $('#aggregateCount', data).html(),
exactMatch = $('script', data).html().match('\\s*c\\s*:\\s*(\\d+)');
$('div').html(exactMatch ? exactMatch[1] + ' (' + aggregate + ')' : aggregate);
}
);
});
Currently, the API does not offer any method to retrieve the +1 count. A workaround would be to fetch it directly from the +1 button like described here (you already linked to it, but I don't think there is another way).
this works for me :
var _url = 'http://mylink.com/';
$.getJSON('http://anyorigin.com/get?callback=?&url=' + encodeURIComponent('https://plusone.google.com/_/+1/fastbutton?url=' + _url)).done(function(data,status,xhr){
console.log($(data.contents).find('#aggregateCount').html());
});
Check out the following for another way to get the Google+ count.
http://share.yandex.ru/gpp.xml?url=http://google.com
can we pass any info., say a string between html pages using javascript. No forms, input fields I am using just want to pas some info in hyperlink.
What's your use-case?
There are lotta ways to do it. Say...
Storing the data in a session cookie (Assuming that you're accessing 2 pages from the same domain.)
Passing data in query string?
For example,
<input id="btnClickMe" onclick="btnClickMe_onClick()" type="button" />
...
<script type="text/javascript">
function btnClickMe_onClick() {
var data = "foo";
var urlOfNewPage = "http://www.test.com/testPage?data=" + data;
// Redirect user to the new URL
}
</script>
By the expression "info in hyperlink" i guess you want to let user inititate communication by clicking on it.
This could work:
Click here
<script>
extra_data = "key1=value1&key2=value2";
document.getElementById("mylink").href = "http://example.com/?" + extra_data;
<script>
Yes. There are many simple ways to do this if all you need to do is pass a short string. You could include a string in a link after a '#' and have that read by Javascript on the next page (looking at location.hash).
Without knowing more, its hard to narrow the approach down to suit your needs.
Simple Example:
one.html
...
Pass data
...
two.html
<script>
var passedData = location.hash.replace('#','');
alert('You passed this data: ' + passedData);
</script>