如何在本地存儲或用戶設置的cookie中實現數據存儲？
[英]How to implement a data storage in local storage or in cookie set by users?
問題描述
我有三個腳本，用戶可以通過這些腳本通過選擇.css文件來更改頁面上的 CSS：
<script>
function setStyle(css) {
document.querySelector('link#style').href = css;
}
</script>
更改字體大小：
<script>
$(document).ready(function () {
//Минимальный размер шрифта
var min=9;
//Максимальный размер шрифта
var max=16;
//Сохраняем заданное в таблице стилей значение размера шрифта
var reset = $('p').css('fontSize');
//Изменение размера будет проводиться для указанных элементов
var elm = $('p, h1, a, ul, li, div.sp-head, h2.widgettitle, label, h3.comment-reply-title, input.submit, span, h4.comments');
//Устанавливаем в переменной значение шрифта по умолчанию (удаляем px)
var size = str_replace(reset, 'px', '');
var size_reset = size;
//Функция увеличения размера шрифта
$('a.fontSizePlus').click(function() {
//Если размер шрифта меньше или равен максимальному значению
if (size<=max) {
//Увеличиваем размер шрифта
size++;
//Устанавливаем размер шрифта
elm.css({'fontSize' : size});
}
//Прерываем передачу события далее по дереву DOM
return false;
});
//Функция уменьшения размера шрифта
$('a.fontSizeMinus').click(function() {
//Если размер шрифта больше или равен минимальному значению
if (size>=min) {
//Уменьшаем размер
size--;
//Устанавливаем размер шрифта
elm.css({'fontSize' : size});
}
//Прерываем дальнейшую передачу события по дереву DOM
return false;
});
//Функция сброса к значению по умолчанию
$('a.fontReset').click(function () {
//Устанавливаем значение размера шрифта по умолчанию
size = size_reset;
elm.css({'fontSize' : reset});
});
});
//Функция замена строки
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
</script>
擴展內容頁面：
<script type="text/javascript">
window.onload = function() {
document.getElementById('WideButton').onclick = function()
{
if(document.body.className != 'wide_class')
{
document.body.className = 'wide_class';
}
else
{
document.body.className = '';
}
}
}
</script>
管理是通過鏈接元素完成的：
<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style1.css')" href="#">style1</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style2.css')" href="#">style2</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style3.css')" href="#">style3</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme/style4.css')" href="#">style4</a>
樣式本身設置為：
<link id="style" href="sitecom/wp-content/themes/theme1/style1.css" rel="stylesheet">
在頁面上，所有這些更改都可以正常工作。 但是，如果您點擊鏈接或刷新頁面，一切都會誤入歧途。 存儲在 cookies 或本地存儲中的用戶如何更改站點？ 那么，重新加載 CSS 后頁面屬性沒有下車？
2 個解決方案
解決方案1
0 2019-09-22 18:51:31
You can use the localstorage api and store the user selected css styles in the form of a json when user is updating the styles. 在$(document).ready中，您可以檢查 localstorage 是否有任何用戶選擇的樣式首選項，然后加載那些 styles 或加載默認的 styles，就像您當前所做的那樣。
解決方案2
0 2019-09-22 19:07:24
作為如何使用localStorage而不是cookie來記住用戶偏好的style-switching的示例，我快速地整理了一個小演示。
StoreFactory只是一個小幫手 function 我放在一起並使用它來簡化本地/會話存儲的一些工作（雖然，tbh，它已經很簡單了。）它在測試中似乎工作正常 - 您需要從console.info( data )開始實際設置活動樣式表 - 我沒有可用的樣式表1,2,3 and 4 ....
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Stylesheet switcher</title>
<link rel='stylesheet' id='style' />
<script>
const StoreFactory=function( name, type ){
'use strict';
const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;
const set=function( data ){
engine.setItem( name, JSON.stringify( data ) );
};
const get=function(){
return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
};
const remove=function(){
engine.removeItem( name );
};
const exists=function(){
return engine.getItem( name )==null ? false : true;
};
const create=function(){
if( !exists() ) set( arguments[0] || {} );
};
return Object.freeze({
set,
get,
exists,
create,
remove
});
};
let store;
let sheet=document.querySelector('link#style');
const setStyle=function( css ){
store.create();
store.set({css:css});
sheet.href = css;
};
window.onload = function(){
store=new StoreFactory( 'css', 'local' );
if( store.exists() ){
let data=store.get();
console.info( data );
/* to call the stylesheet */
sheet.href=data.css;
}
};
</script>
</head>
<body>
<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style1.css')" href="#">style1</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style2.css')" href="#">style2</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style3.css')" href="#">style3</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme/style4.css')" href="#">style4</a>
</body>
</html>
工作示例
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Stylesheet switcher</title>
<link rel='stylesheet' id='style' />
<script>
const StoreFactory=function( name, type ){
'use strict';
const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;
const set=function( data ){
engine.setItem( name, JSON.stringify( data ) );
};
const get=function(){
return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
};
const remove=function(){
engine.removeItem( name );
};
const exists=function(){
return engine.getItem( name )==null ? false : true;
};
const create=function(){
if( !exists() ) set( arguments[0] || {} );
};
return Object.freeze({
set,
get,
exists,
create,
remove
});
};
let store;
let sheet=document.querySelector('link#style');
const setStyle=function( css ){
store.create();
store.set({css:css});
sheet.href = css;
};
window.onload = function(){
store=new StoreFactory( 'css', 'local' );
if( store.exists() ){
let data=store.get();
console.info( data );
/* to call the stylesheet */
sheet.href=data.css;
}
};
</script>
</head>
<body>
<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>
<a onclick="setStyle('style1.css')" href="#">style1</a>
<a onclick="setStyle('style2.css')" href="#">style2</a>
<a onclick="setStyle('style3.css')" href="#">style3</a>
<a onclick="setStyle('style4.css')" href="#">style4</a>
</body>
</html>
使用的樣式表
/* style1.css */
body{background:red;color:white}
/* style2.css */
body{background:blue;color:white}
/* style2.css */
body{background:blue;color:white}
/* style4.css */
body{background:green;color:yellow}
如何使用本地存儲在不同用戶中設置項目？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.