naver / egjs-persist Goto Github PK
View Code? Open in Web Editor NEWProvide cache interface to handle persisted data among history navigation.
Home Page: https://naver.github.io/egjs-persist/
License: MIT License
Provide cache interface to handle persisted data among history navigation.
Home Page: https://naver.github.io/egjs-persist/
License: MIT License
Currently only URL is used as a key for different page. and URL is added on depths
arrays. But It has some problem. it could have too many duplication of URL. So it removes previous URL and just adds new depth. For example,
() means a depth.
Then history will be B -> C -> D -> A
and it make problem when you go back to previous A and navigates to other sites. For example, A-> E... In this situation B-> C->D should be removed. But depth of A (5) is bigger than B, C, D(2, 3, 4).
To supplement this, we can use document.referrer
with URL. It makes possible that A(1) followed by none can be distinguished by A(5) followed by D(4).
For example,
And also it could manage history more correctly. For example if persist
is not applied on page A, and You navigate like follows you could make depths unintended way.
Then B -> C is the depths
of this history. But If you add A (referrer) on a history then you can acquire depth like A->C
as you intended.
persist v1 included in egjs v1. https://github.com/naver/egjs/
Provided static method in jQuery name space.
Consider providing a separate jQuery plug-in file for easy migration from Egjs v1
@sculove commented on Wed Dec 23 2015
if you include persist.js and you use history API, you face a problem.
because, persist sets up history.state to null.
@mixed commented on Mon Jan 11 2016
ref #37
start => a => b => c(replace)
Hi
The 360-degree demo on egjs is one of the most performant ones of any JS library out there. Is there a demo / reference of the 360-degree code without a JQuery dependency?
Version information should be exposed on documentation like below.
You should apply following rules.
https://github.com/naver/egjs-flicking/blob/master/src/index.js#L7
The manual test page is not working.
var p =new eg.Persist("s")
p.get()
Uncaught TypeError: Cannot read property 'length' of undefined
I hope that the information stored and read is different according to the hash.
네이버와 같은 여러 판으로 구성되어있는 사이트내에서 persist를 응용하여 히스토리 BACK시에 화면 구성을 하려고 할때
HTML각각 판을 저장할 수 있는 방법이 있을까요?
> eslint src
Oops! Something went wrong! :(
ESLint couldn't find the plugin "eslint-plugin-import". This can happen for a couple different reasons:
1. If ESLint is installed globally, then make sure eslint-plugin-import is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.
2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm i eslint-plugin-import@latest --save-dev
If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
Cannot read property 'state' of undefined
Error: node_modules/@egjs/persist/index.d.ts(28,9): error TS1038: A 'declare' modifier cannot be used in an already ambient context.
Error: node_modules/@egjs/persist/index.d.ts(34,9): error TS1038: A 'declare' modifier cannot be used in an already ambient context
Support for persist in node.js
Currently key is based on location.href
. So If the url has hash
it generates too many key.
get,set 말고 저장된 값중 잘못 저장된 값을 지울 수 있을까요?
혹은 set을 통해 특정값을 날릴 수 가 있을지... 문의 드려 봅니다.
because of the line below on StorageManager.js
const historyState = history.state;
if (typeof historyState === "object") {
historyState[PERSIST_KEY] = JSON.stringify(state);
history.replaceState(
historyState,
document.title,
location.href
);
} else {
https://github.com/naver/egjs-persist/blob/master/src/storageManager.js#L128
Switch rollup from webpack
Even if you move a page in SPA, persist does not work.
Because there is no performance object.
The setter always need the entire object,
In this way, you can not avoid unnecessarily long code.
// Current
const state = eg.Persist("key");
state.foo.bar = false;
eg.Persist("key", state);
// New api
eg.Persist.set("key", "list.0", false);
// or
const persist = new eg.Persist("key");
persist.set("list.0", false);
var persist = new eg.Persist("key");
// instance method
persist.get("foo.bar");
persist.set("foo.bar", 1);
// static method
eg.Persist.set(key, 'foo.0.bar', 'b'); // use number to access item in array
Set
method should return self for method chaining.persist.set("foo.bar.zoo", 20)
.set("foo.zoom.zoo", 10)
.set("foo.too.zoo", 10);
If you set no value and get no value, you return null unconditionally.
persist.set("a", "");
persist.set("b", 0);
persist.set("c", null);
persist.set("d", undefined);
persist.get("a"); // null, but ""
persist.get("b"); // null, but 0
persist.get("c"); // null
persist.get("d"); // null
Support Typescript environment
Distribution files make makes error when transpiled by YUI Compressor.
It's OK on Google Closure and UglifyJS.
I am using the state save / restore module to restore the state like BFCache provided by Safari. However, there is an issue that uses space unnecessarily. I have tried to solve this problem, but I am not satisfied with it.
We have created a module to remember the previous state when moving to the previous or next page in the history of the page.
This feature is one of the functions that are required quite a lot in the multiple page based service. That is, when you press the Back button or the Forward button, you want to restore the previous state to improve usability. For example, the scroll position is the most representative state. In addition, the position of the carousel shown in the page can also be restored. In the Safari browser, BFCache provides this functionality.
On the PC, Android Chrome, the Back button does not restore the previous page when you go to the previous page by pressing the Back button, so you can use this module (internally using session storage) to save the state to be restored on the page, When you return to the page, it recalls the saved state.
However, the current implementation is a big problem. As you move through the page, the stored status values will not be deleted and will continue to accumulate. Because there is a limit to the storage space (2MB ~ 10MB), there is an issue that exceeds the storage space.
To solve this problem, a method for deleting unnecessary data is required.
To eliminate unnecessary state values, the method you want to implement is as follows.
Removes the status of unnecessary pages from the session storage when the previously moved pages are excluded from the target to move back or forward based on the current page. For example, if you move from A page to B page and then back to C page again, page B is not available for Back or Forward. Therefore, the status information of the page is cleared.
This implementation maps the depth information to each page movement path. If the depth of the newly moved page is less than or equal to the existing page depth, existing page information existing below the depth is deleted.
However, I encounter some difficulties.
1. No Browser API to know depth information
2. Can not use or update history state information
- history.state can be overwritten arbitrarily on each page
3. The history length that will be the basis of the depth value is maximum length is 50 (based on Chrome).
4. Can not distinguish whether navigation is Back or Forward.
5. Long press on the Back / Forward button, as well as previous page navigation, allows you to skip several steps.
So I thought about how to calculate the virtual depth based on the page URL.
That is, we add depth every time we move to a new page. For example, if you move in the order of A -> B -> C, you can randomly assign depths of 1, 2, and 3, respectively.
However, this alternative also faces two problems:
1. A -> B -> C -> A (each moved to a new page), A state value will be overwritten.
2. A -> B -> C -> A -> D (each moved to new page) You can not know the depth of current A(1st or 4th) if you move the steps through the long press of the Back button.
History.state cannot be used
In this situation, it is possible to compensate in the following way, but it is not a perfect solution either.
- You can complement the history length value by creating a key for each page in combination with a URL, but if you go beyond 50, the same problem occurs.
- The possibility of duplication can not be avoided even though the key to the page is combined with the URL to Referrer.
I am currently working on the issue above, but I would like to ask you further advice.
@sculove commented on Thu Dec 29 2016
The persist create the virtual bfcache (?).
When history back, the scroll position is moved by browser like chrome.
How about control scrollRestoration
property?
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
@netil commented on Wed Jan 04 2017
@sculove commented on Wed Jan 04 2017
I think if you are using persist, it will be the user who will want to control the scrolling
@netil commented on Wed Jan 04 2017
But, in other word it's unnecessary handle scroll (for that it should check exact restoration happening natively)
Related PR: #13
""(empty string), false, NaN is saved as null value at Persist module.
It is likely that the user should be notified that the value is different from the specified value.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.