持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

Day 17

HTML5 数据存储

Web Storages（sessionStorage和localStorage）是HTML5中新的 API，与传统的Cookie相比具有很大的优势。在HTML5之前，网页应用的数据包括网络请求都必须存储在cookies中而且必须将应用程序数据存储在每个网络请求中的cookie中。Web Storages相比cookie更加安全，数据存储变得更加安全，更多数据可以保存在本地，而且不会影响网站性能，很多浏览器中cookie限制为最大存储大小是4KB。Web Storages比cookie能够存的大的多的数据（大于5MB），而且不用传输到服务器，同一个网站的所有页面能存储和访问该网站的数据源

JavaScript能访问存储的数据，这让我们能够利用客户端脚本来完成许多传统上涉及服务器端编程和关联数据库的事情。Web Storage包含两个存储对象

sessionStorage
localStorage

localStorage与sessionStorage类似，不同之处在于，localStorage中存储的数据没有过期时间，但sessionStorage中存储的数据在页面会话结束时（即页面关闭时）就会被清除。

应该注意，localStorage与sessionStorage存储的数据特定于页面的协议。

存储的keys和values都必须是string类型的，如果为object，integer，都会自动转化为string。

web_storage

sessionStorage

sessionStorage 仅在浏览器tab或窗口会话中可用，它旨在将数据存储在单个网页会话中，意味着如果关闭窗口，会话数据将被删除。由于SessionStorage和LocalStorage具有相似的方法，因此我们仅专注于LocalStorage。

localStorage

HTML5中的localStorage是web存储API的一个模块，用于在浏览器上存储不会过期的数据即使关闭浏览器后，数据也将在浏览器上可用。localStorage在浏览器会话间也能保持存储。

这意味着，当浏览器关闭和重新打开时，数据仍然保存着在，同时在tab和窗口之间也是持久保存的

Web Storage data 在两个不同浏览器中保存数据不互通，例如在Firefox上不能访问IE浏览器保存的数据，这点很像cookies。 localStorage有五个方法。分别是setItem(), getItem(), removeItem(), clear(), key()

Web Storages的使用案例

Web存储的一些用例包括

临时保存数据
保存用户放置在购物车中的产品
可以使用localStorage在页面请求、多个tab之间以及浏览器会话之间提供数据
可以使用localStorage完全脱机使用
当static类型数据存储在客户端来减少请求次数时，webStorage可以很好的替代。甚至说base64的图片也可以用webStorage存储。
可以用于用户身份认证，是否登录

对于上面提到的示例，很适合使用localStorage。那么，您可能想知道我们应该在什么时候使用sessionStorage。

当我们希望在窗口关闭后立即清除数据。或者，我们不希望同一个应用的不同窗口数据相互干扰。这些情况下最适合SessionStorage。

现在，让我们看看如何使用这些Web Storage 的API

Web Storage 对象

window上提供了两个API

window.localStorage - 存储不过期的数据
window.sessionStorage - 存储会话数据（关闭浏览器tab时数据会丢失）现如今大多数浏览器都支持webStorage，但最好使用的时候检查一下浏览器对localStorage和sessionStorage的支持情况。让我们看看Web存储对象的可用方法。

Web Storage 对象:

localStorage - 创建localstorage对象
localStorage.clear() - 清除localStorage中保存的所有数据
localStorage.setItem() - 将数据存储在本地存储中。它接受一个键和一个值
localStorage.getItem() - 展示保存在localStorage中的数据，接受一个参数key.
localStorage.removeItem() -清除key对应的localStorage中的数据
localStorage.key() - 展示保存在localStorage中的数据，接受一个参数索引值来展示。

local_storage

保存值到localStorage中

当我们将数据存储在localStorage中时，它将存储为字符串。如果存储的是数组或对象，则应首先对其进行stringify以保存string类型，除非丢失原始数据的数组结构或对象结构。

我们保存数据到 localStorage通过使用 localStorage.setItem 方法.

//syntax
localStorage.setItem('key', 'value')

保存字符串到localStorage

localStorage.setItem('firstName', 'Asabeneh') // since the value is string we do not stringify it
console.log(localStorage)

Storage {firstName: 'Asabeneh', length: 1}

保存number值到localStorage

localStorage.setItem('age', 200)
console.log(localStorage)

 Storage {age: '200', firstName: 'Asabeneh', length: 2}

保存数组到 localStorage. 必须先JSON.stringify

const skills = ['HTML', 'CSS', 'JS', 'React']
//Skills array has to be stringified first to keep the format.
const skillsJSON = JSON.stringify(skills, undefined, 4)
localStorage.setItem('skills', skillsJSON)
console.log(localStorage)

Storage {age: '200', firstName: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3}

let skills = [
  { tech: 'HTML', level: 10 },
  { tech: 'CSS', level: 9 },
  { tech: 'JS', level: 8 },
  { tech: 'React', level: 9 },
  { tech: 'Redux', level: 10 },
  { tech: 'Node', level: 8 },
  { tech: 'MongoDB', level: 8 }
]

let skillJSON = JSON.stringify(skills)
localStorage.setItem('skills', skillJSON)

保存对象到 localStorage. 保存之前对象也需要字符串化

const user = {
  firstName: 'Asabeneh',
  age: 250,
  skills: ['HTML', 'CSS', 'JS', 'React']
}

const userText = JSON.stringify(user, undefined, 4)
localStorage.setItem('user', userText)

从localStorage中取数据

通过 localStorage.getItem() 方法取数据.

//syntax
localStorage.getItem('key')

let firstName = localStorage.getItem('firstName')
let age = localStorage.getItem('age')
let skills = localStorage.getItem('skills')
console.log(firstName, age, skills)

 'Asabeneh', '200', '['HTML','CSS','JS','React']'

我们需要使用JSON.parse方法将获取到的字符串转化为JSON对象

let skills = localStorage.getItem('skills')
let skillsObj = JSON.parse(skills, undefined, 4)
console.log(skillsObj)

['HTML','CSS','JS','React']

清除 localStorage

clear 方法，将清空所有保存的数据,

localStorage.clear()

练习

练习: Level 1

保存你的姓，名，年龄，国籍，城市，通过localStorage.

练习: Level 2

创建student对象，对象有姓，名，年龄，国籍，包含对应的键值对，保存在localStorage中

练习: Level 3

创建personAccount对象包含firstname, lastname, incomes, expenses 属性同时包含 totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance 方法，incomes是incomes数组及描述，expenses也是expenses数组及其描述。

30天JavaScript: 网络存储 (Day 17)