开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

前言

开发需求中我们可以能需要将一些数据暂存一下供我们使用，JS给我们提供了本地存储的方法帮助我们，今天我们来一下JS的本地存储。

localStorage

定义

localStorage能将数据永久地保留到本地，也就是说我们不去删除那么保留的数据就不会消失。存储大小一般最大为5M,它只能存字符串，如果我们想要保存对象等需要用JSOM.stringfy()转为JSON字符串。

用法

localStorage.setItem():设置存储，第一个参数是存储的名称，第二个是存储的数据。

   localStorage.setItem('a','abc')

我们可以在浏览器中查看我们保存的数据，f12打开开发者工具，点击Application(应用程序)就能看到localStorage。

localStorage.getItem():获取存储，参数为名称、

   console.log(localStorage.getItem('a'))//'abc'

注意：我们保存的其他类型如nunber、boolean都会转成字符串，所以取出来的时候也是字符串。

localStorage.removeItem():移除保存的数据，参数也是保存名称。

    localStorage.removeItem('a')
   console.log(localStorage.getItem('a'))//null

localStorage.clear():清空所有保存的数据。
localStorage.key():获取保存的key值，也是设置的保存名称。保存在localStorage的数据在同一个地址下才能够共享的。

sessionStorage

sessionStorage被称为临时存储，它的用法基本跟localStorage一样，查看保存数据的位置也是在一起的，从前面的截取我们就能找到。它与localStorage最大的区别的就是周期，当页面关闭sessinStorage保存的数据就会被清除，这也是它名字由来。

    sessionStorage.setItem('b','123')
   console.log(sessionStorage.key(0))//'b'
   console.log(sessionStorage.getItem('b'))//'123'
   sessionStorage.removeItem('b')
   sessionStorage.clear()

cookie

定义

cookie用来保存客户身份信息的数据，这些数据可以用来验证客户的身份，比如生成的token等，cookie的存储量小，一般不超过4kb，存储量虽小但信息最为重要。我们可以自定义cookie的过期时间，它的查看位置也是在localStorage的位置。

用法

document.cookie:创建cookie数据，我们的修改，删除都是通过该方法进行操作的。
expires:设置过期时间，我们在创建的cookie后加上expires就可以设置过期时间。

   const time = new Date().toUTCString() //时间要变成UTC或GMT时间
  document.cookie='name:tangping;expires='+time

修改：直接用documen.cookie重新写一下即可。
删除：当cookie到了过期时间会自动删除，所以如果我们想要删除直接将过期时间设置为之前的时间就行。

总结

JS存储的三种方式，cookie存储小但信息重要，sessionStorage跟localStorage存储量大但只能存取字符串，三者生命周期，用法等不相同，之间的区别要记牢。

JS学习——本地存储

前言

localStorage

定义

用法

sessionStorage

cookie

定义

用法

总结