Add ability to store up to 10 colors in local storage upon picking them.

[YoofiBP]

Hello!

Started using this tool and its perfect for my use case.

I would like to add the ability to store the last 10 colors a user creates using the picker.

I have added a local storage service to handle this and call it from the picker and button render.

Do let me know if you have any questions or concerns

[flaming-cl]

Hi, thanks for your contribution！ Would you please explain this new feature little bit more: Will these cached colors replace some of the default colors in the palette?

[YoofiBP]

Hey! So when the user creates custom colors with the picker we store the last 10 colors they choose so they have access to these and do not have to reuse the picker for colors they recently create I merged them with the default colors palette which means the total selectable colors would be numberOfDefaultColors + numberOfCached Colors I was unsure about the best way to reconcile the default colors and cached colors hence the concatenation.

[flaming-cl]

It's great to allow users find their previous customized colors. But for existing users who do not spend time customize their own colors, we should also give them the choice to turn off the colors cache feature. Do you think it is better to add some configurations for this feature? For example:

1. allowUserCachedColors (default = false)
2. numberOfUserCachedColors(default = 0)

If a user wants to make some changes, the configurations can be changed to:

1. allowUserCachedColors (true)
2. numberOfUserCachedColors(10)

[YoofiBP]

Yes I configurations is certainly better. allowUserCachedColors and numberOfUserCachedColors sound like good options.

Should I go ahead and make those changes?

[flaming-cl]

Hi, I am sorry it seems that the code you've submitted is not working at this moment (Maybe you forget to new an instance for your localStorageService?)

For applications which include a user custom colors feature, generally there is a default colors part and a custom colors part (aka leaving N empty color nodes at the very beginning, and not pop/push new nodes when users select their own color). For this solution, sorry that currently I have not come up with a good idea about the UI design for a custom colors part.

If we do not add a fixed custom colors part, adding/deleting color nodes means extra browser reflow calculation. Luckily this is a small plugin, such reflow calculation may not be a problem for most of the users. But the problem lies in the user experience: here the previous added colors (for example, the 11th color) will be automatically replaced by newly added colors, and this replacement behavior is not controlled by the users.

If you come up with any ideas about the aforementioned issues, please feel free to let me know.