> For the complete documentation index, see [llms.txt](https://api-docs.devhub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api-docs.devhub.com/local-storage-api/what-is-the-local-storage-api.md).

# What is the Local Storage API?

This feature is available for customers that have multiple Sites under a single domain. One common use case is for Local Pages. Once enabled, we create and store an object in the visitor's browser (using [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)) containing relevant information about the last Site (and any Location details - city, state, phone number, etc) they visited.

This object should then be available from any page (i.e. the Corporate Site) as long as its within the same hostname (i.e. [www.yourdomain.com](http://www.yourdomain.com)).

## Data example

The `localSiteData` object is a stripped-down (does not contain all fields) JSON encoded version of our [Site object](/core-resources/sites.md#site-object).

Below is an example that contains commonly used fields.

```javascript
{
    "custom_fields": {
        "example_custom_field": "More data",
        ...
    },
    "formatted_url": "https://www.example.com/locations/seattle/",
    "locations": [
        {
            "city": "Seattle",
            "country": "US",
            "formatted_address": "555 Main St., Seattle, WA 98121",
            "location_name": "Seattle Location",
            "phonemap": {
                "phone": "(206) 555-5555"
            },
            "phonemap_e164": {
                "phone": "+12065555555"
            },
            "postal_code": "98121",
            "service_areas": "Greater Seattle area",
            "state": "WA",
            "street": "555 Main St"
        }
    ]
}
```

Below are some descriptions of common use cases of this data.

#### Site

Accessed from the main `localSiteData` object

| Data value     | Description                                                                 |
| -------------- | --------------------------------------------------------------------------- |
| custom\_fields | Custom field values. Should use these with caution as they commonly change. |
| formatted\_url | URL of the page/site they visited last                                      |

#### Location

Accessed from `localSiteData.locations[0]`

| Data value           | Description                                                                                                         |
| -------------------- | ------------------------------------------------------------------------------------------------------------------- |
| formatted\_address   | This will be the full formatted address (street, city, state, etc) for the location that we commonly in the footer. |
| location\_name       | This is the location name                                                                                           |
| phonemap.phone       | This is the display friendly version of the phone number                                                            |
| phonemap\_e164.phone | This is the "click-to-call" formatted version of the phone number                                                   |
| service\_areas       | This is the service areas for the location                                                                          |

## Code examples

### Parsing the data

```javascript
var localSiteData = JSON.parse(localStorage.getItem('localSiteData'));
```

### Check if local site data is set

If you want to first check to see if `localSiteData` is set before using it.

```javascript
if (localStorage.getItem('localSiteData') === null) {
  var localSiteData = JSON.parse(localStorage.getItem('localSiteData'));

  // use this data to update the DOM
}
```

### Simple example of updating a div

Example of updating a div in the header of the page with the 

```markup
<header class="header">
  <div id="local-info">
    Call YourBrand - <a href="+18005555555">1 (800) 555-5555</a>
  </div>
</header>

<script>
if (localStorage.getItem('localSiteData') === null) {
  var localSiteData = JSON.parse(localStorage.getItem('localSiteData'));
  var locationData = localSiteData.locations[0];
  document.getElementById("local-info").innerHTML = 'Call ' +
    locationData.location_name + 
    ' - <a href="' + locationData.phonemap_e164.phone + '">' + 
    locationData.phonemap.phone + '</a>';
}
</script>
```

This would update the DOM with something like

```markup
<header class="header">
  <div id="local-info">
    Call Seattle Location - <a href="+12065555555">(206) 555-5555</a>
  </div>
</header>
```

## Testing

For testing purposes, you will need to be in the same "domain" to get access to the localStorage data.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://api-docs.devhub.com/local-storage-api/what-is-the-local-storage-api.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.