# 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](https://api-docs.devhub.com/core-resources/sites#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.