Building a Browser History Feature: Implementing the Memento Pattern

How its save and restore states??

Sumonta Saha Mridul
Bootcamp

--

What is Memento Design Pattern?

Memento is a behavioral design pattern that lets you save and restore the previous state of an object without revealing the details of its implementation.

The Memento design pattern is a behavioral design pattern that provides a way to capture and restore the internal state of an object without violating encapsulation. It allows you to save and restore the state of an object at different points in time, creating a “snapshot” of its state that can be reverted to later if needed.

What are the main components of Memento Design Pattern?

  1. Originator: This is the object whose state needs to be saved and restored. It creates a memento object containing a snapshot of its internal state and can also restore its state from a memento object.
  2. Memento: This is an immutable object that represents the state of the originator at a particular point in time. It can only be created by the originator and provides read-only access to the saved state.
  3. Caretaker: This object is responsible for keeping track of the mementos and managing them. It can store multiple mementos and decide when to save or restore the state of the originator.
the app saves a snapshot of the objects’ state, which can later be used to restore objects to their previous state.

Scenario: Browser History (Save and Restore)

Once upon a time, there was a web browser called “MyBrowser.” MyBrowser had a feature to save and restore browsing history using the Memento pattern.

One day, a user named Alice opened MyBrowser and started navigating the web. She first visited “www.example.com" to find some information about a product. After exploring the website, she decided to save the current page in her browsing history.

Using MyBrowser’s navigation functionality, Alice then went to “www.openai.com" to read some interesting articles. Impressed by the content, she decided to save this page as well.

Curious about her current page, Alice checked MyBrowser’s display, which showed that the current page was “www.openai.com."

Alice then remembered she needed to refer back to the information on “www.example.com." She used MyBrowser’s history feature to restore the previous page.

MyBrowser successfully restored the previous page, and Alice saw “www.example.com" displayed on the screen.

However, Alice realized she wanted to return to “www.openai.com" to continue reading the articles. She used MyBrowser’s history feature again, this time to redo the navigation.

MyBrowser restored the next page in the history, and Alice saw “www.openai.com" once again.

// Originator
class Browser {
private String currentPage;

public void goToPage(String page) {
System.out.println("Navigating to " + page);
currentPage = page;
}

public Memento save() {
return new Memento(currentPage);
}

public void restore(Memento memento) {
currentPage = memento.getState();
System.out.println("Restored to page: " + currentPage);
}

public String getCurrentPage() {
return currentPage;
}
}
// Memento
class Memento {
private final String state;

public Memento(String state) {
this.state = state;
}

public String getState() {
return state;
}
}
// Caretaker
class BrowserHistory {
private List<Memento> history = new ArrayList<>();
private int currentIndex = -1;

public void save(Memento memento) {
history.add(memento);
currentIndex = history.size() - 1;
}

public Memento undo() {
if (currentIndex > 0) {
currentIndex--;
return history.get(currentIndex);
}
return null;
}

public Memento redo() {
if (currentIndex < history.size() - 1) {
currentIndex++;
return history.get(currentIndex);
}
return null;
}
}
public class Client {
public static void main(String[] args) {
Browser browser = new Browser();
BrowserHistory history = new BrowserHistory();

browser.goToPage("www.example.com");
history.save(browser.save());

browser.goToPage("www.openai.com");
history.save(browser.save());

System.out.println("Current page: " + browser.getCurrentPage());
// Output: www.openai.com

browser.restore(history.undo());
System.out.println("Current page: " + browser.getCurrentPage());
// Output: www.example.com

browser.restore(history.redo());
System.out.println("Current page: " + browser.getCurrentPage());
// Output: www.openai.com
}
}
Overall Output :
Navigating to www.example.com
Navigating to www.openai.com
Current page: www.openai.com
Restored to page: www.example.com
Current page: www.example.com
Restored to page: www.openai.com
Current page: www.openai.com
UML Diagram of Memento Pattern

What are the points that differentiate memento pattern from other patterns?

Distinguishing points of the Memento pattern from other patterns:

  1. Encapsulates and restores the internal state of an object: The Memento pattern focuses on capturing and restoring the internal state of an object, ensuring encapsulation is not violated.
  2. Provides a snapshot-based approach: Memento captures the complete state of an object at a particular point in time, allowing you to revert back to that state when needed.
  3. Separation of concerns: The responsibility of saving and managing the state is delegated to the caretaker, keeping the originator clean and focused on its main functionality.

Overall, the Memento pattern is useful when you need to save and restore the state of an object, such as implementing.

Disadvantage of Memento Design Pattern

Here are some of the potential disadvantages of using the Memento pattern:

  1. Increased memory usage: The Memento pattern requires storing snapshots of an object’s state, which can increase memory usage, especially if the state is large or if many snapshots are taken.
  2. Less Performance: Saving and restoring the state using the Memento pattern involves additional operations like creating and managing memento objects. These operations can introduce overhead and potentially impact performance, especially if frequent state changes occur.
  3. Limited scalability for complex state: The Memento pattern might become less effective when dealing with complex state structures. If the object’s state includes references to other objects or has nested data structures, capturing and restoring such state accurately can be challenging.
  4. Lack of encapsulation in some scenarios: While the Memento pattern aims to encapsulate the object’s state, it may not be suitable in situations where the object’s state contains sensitive information that should not be exposed or copied outside the object. In such cases, alternative approaches may need to be considered.
  5. Dependency on originator: The Memento pattern tightly couples the memento objects with the originator objects. If the originator’s internal structure or state representation changes, it may affect the memento objects and their compatibility with previous snapshots.

--

--

Strategic thinker with a passion😍 for Software Engineering💻 and a creative Photographer📸 https://sumonta056.github.io/