LocalStorage的使用

1、LocalStorage的特点

保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据；
大小为5M左右；
仅在客户端使用，不和服务端进行通信；
接口封装较好。

基于上面的特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)。

2、存入/读取数据

localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。

localStorage.setItem("key","value");

读取数据使用getItem方法。它只有一个参数，就是键名。

var valueLocal = localStorage.getItem("key");

具体步骤，请看下面的例子：

<script>
  if(window.localStorage){ 
   localStorage.setItem（'name','world'）  
   localStorage.setItem（“gender','famale'）
  }
</script>

<body>
  <div id="name"></div>
  <div id="gender"></div>
  <script>
    var name=localStorage.getItem('name')
    var gender=localStorage.getItem('gender')
    document.getElementById('name').innerHTML=name
    document.getElementById('gender').innerHTML=gender
  </script>
</body>

3、使用场景

LocalStorage在存储方面没有什么特别的限制，理论上 Cookie 无法胜任的、可以用简单的键值对来存取的数据存储任务，都可以交给 LocalStorage 来做。

这里给大家举个例子，考虑到 LocalStorage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串：

image

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

LocalStorage的使用