I currently have an on-click event which changes the colour of a text item when clicked on (black to purple) to indicate that the text has been read. Is it possible to use wix-storage (local) to enable this changed text colour to persist for the user across multiple sessions? I have multiple text items on the same page, all of which need to have their colour states persist across sessions.
So why not? Store the textId in local once it’s been clicked, and retrieve the stored textId’s once the page has loaded. And change the colors based on the retrieved textIds
Something like this?
$w.onReady(function () {
import { local } from 'wix-storage';
// ...
let value = local.getItem("text16"); // "value"
});
export function text16_click(event) {
if ($w("#text19").collapsed) {
$w("#text19").expand();
} else {
$w("#text19").collapse();
} {
$w("#text16").html = `<h1 style = "color:#8352A2"> ${$w("#text16").text} </h1>`;
} {
import { local } from 'wix-storage';
// ...
local.setItem("text16", "color:#8352A2");
}
}
@williampearton no. that’s not going to work.
I thought about something like:
import { local } from 'wix-storage';
let clickedTexts = [];
$w.onReady(() => {
let retrivedInfo = local.getItem("storedTexts");
if(retrivedInfo) {
clickedTexts = JSON.parse(retrivedInfo);
clickedTexts.forEach(e => $w("#" + e").html = `<font color="#8352A2">${$w("#" + e").text}</font>`);
}
$w("#text1, #text2, #text3").onClick(event => {
let cText = event.target.id;
if(!clickedTexts.includes(cText)){clickedTexts.push(cText);}
$w("#" + cText").html = `<font color="#8352A2">${$w("#" + cText").text}</font>`;
local.setItem("storedTexts", JSON.stringify(clickedTexts));
})
})
Hi Hayden, here is another example which you could use. I haven’t included any code that changes the color of the text when you click on it. This will simply load the HTML property of each the text items when the page loads, and save them when you click on them.
import {local} from 'wix-storage';
$w.onReady(function () {
let textelements = [$w('#text1'), $w('#text2'), $w('#text3'), $w('#text4')]
textelements.forEach(function(element){
let key = element.id
let value = local.getItem(key)
if(value){element.html = value}
element.onClick(function(event){
value = element.html
local.setItem(key, value);
})
})
})
You could add your own code to the onClick event handler to change the color of the text, or change anything else you like. A good way to get the HTML code you want for an element is using the console in the preview window. Change an element to the target HTML and run.
console.log($w('#text1').html)
Then you can add code to set the .html property of that element to that html code when the user clicks on it.
Hi, thanks for the help. It’s working well except for two issues: 1) as shown below the first text (text16) displays its color code (8352A2) instead of the text (A Leaf in the Storm), all of the other text items (text20, text22, text24) display perfectly and retain the new color after changing pages.
2) is it possible to specify that this only affects the page the user is on, because currently every text20/text22/text24 on the site is changing color regardless of being clicked on or not.
import wixData from 'wix-data';
import { local } from 'wix-storage';
$w.onReady(function () {
let textelements = [$w('#text20'), $w('#text22'), $w('#text24'),$w('#text16')]
textelements.forEach(function (element) {
let key = element.id
let value = local.getItem(key)
if (value) { element.html = value }
element.onClick(function (event) {
value = element.html
local.setItem(key, value);
})
})
{console.log($w('#text16').html)}
})
export function text16_click(event) {
if ($w("#text19").collapsed) {
$w("#text19").expand();
} else {
$w("#text19").collapse();
} {
$w("#text16").html = `<h1 style = "color:#8352A2"> ${$w("#text16").text} </h1>`;
}
}
export function text20_click(event) {
if ($w("#text21").collapsed) {
$w("#text21").expand();
} else {
$w("#text21").collapse();
} {
$w("#text20").html = `<h1 style = "color:#8352A2"> ${$w("#text20").text} </h1>`;
}
}
export function text22_click(event) {
if ($w("#text23").collapsed) {
$w("#text23").expand();
} else {
$w("#text23").collapse();
} {
$w("#text22").html = `<h1 style = "color:#8352A2"> ${$w("#text22").text} </h1>`;
}
}
Hi Hayden, before going into this more, I just wondered if you have put this in the site code or the page code? It should all go in the page code and not the site code, because if it’s site wide, every page gets affected. In the code editor, there are two tabs on the left of the screen, please click on the on called ‘page’ and put the code there.
It’s in the page code
I’ve had some unpredictable behavior once when I tried defining an onclick event in addition to having an event handler that is linked to the visual editor. This might be a similar problem.
You could try changing
export function text16_click(event) {
...
}
to
$w('#text16').onClick(function (event) {
...
})
for each of these ‘export function textxx_click’. put the new functions in the beginning of the onready function in the top of your code.The event handler then doesn’t need to be linked to the visual editor anymore.
If, after that, you still get strange results, they could be stored in the local storage which we work with, and it could help to clear the browser cache or access the page from a different device.