localStorage 的用法

 

在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法：

1、localStorage - 没有时间限制的数据存储

2、sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。下面我说一下localStorage 的用法：

一、什么是localStorage？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

二、localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

三、localStorage的使用

1、添加键值对：localStorage.setItem(key, value)setItem 用于把值 value 存储到键key上，除了使用 setItem ，还可以使用 localStorage.key = value 或者 localStorage['key'] = value 这两种形式。另外需要注意的是，key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString() 方法来转换成字符串再存储。当我们要存储对象是，应先转换成我们可识别的字符串格式（比如JSON格式）再进行存储。

localStorage.setItem("class","1702") //存储名字为name值为caibin的变量

localStorage.class= "1702"; // 等价于上面的命令

localStorage // Storage{class: "1702", length: 1} 读取数据

2、获取键值：localStorage.getItem(key)getItem 用于获取键 key 对应的数据，和 setItem 一样，getItem 也有两种等效形式 value = localStorage.key和 value = localStorage['key'] 。获取到的 value 值是字符串类型，如果需要其他类型，要做手动的类型转换。

localStorage.getItem("class") //1702,读取保存在localStorage对象里名为class的变量的值

localStorage.class// "1702"

localStorage.valueOf() //读取存储在localStorage上的所有数据

localStorage.key(0) // 读取第一条数据的变量名(键值)

//遍历并输出localStorage里存储的名字和值

for(var i=0; i<localStorage.length;i++){

  console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));

}

3、删除键值对：localStorage.removeItem(key)removeItem 用于删除指定键的项，localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。

localStorage.getItem("class") //1702

localStorage.removeItem("class");// 删除存储到

classlocalStorage.getItem(class); // null

4、清除所有键值对：localStorage.clear()clear 用于删除所有存储的内容，它和removeItem不同的地方是removeItem 删除的是某一项，而clear是删除所有。

 localStorage.clear();// 清除 localStorage

 localStorage.length; // 0

5、获取 localStorage 的属性名称(键名称)：localStorage.key(index)key 方法用于获取指定索引的键名称。需要注意的是赋值早的键值对应的索引值大，赋值完的键值对应的索引小, key方法可用于遍历 localStorage 存储的键值。

localStorage.setItem("class","1702")

localStorage.key(0); // "class"

localStorage.setItem("sex","boy");

localStorage.key(0); // "sex"

localStorage.key(1); // "class"

6、获取 localStorage 中保存的键值对的数量：localStorage.lengthlength 属性用于获取 localStorage 中键值对的数量。

localStorage.setItem("class","1702")

localStorage.length ; // 1条

localStorage.setItem("sex","boy");

localStorage.length ; // 2条

下面是一些localStorage常用的函数：

setItem 存储数据【增】

getItem 读取数据【查单个】

removeItem 删除某个数据【删单个】

clear 删除全部数据【删全部】

length localStorage存储变量的个数【计算数据总数】

key 读取第i个数据的名字或称为键值(从0开始计数)

valueOf 获取所有存储的数据【查全部】

hasOwnProperty 检查localStorage上是否保存了变量x，需要传入x【判断】

propertyIsEnumerable 用来检测属性是否属于某个对象的【判断】

toLocaleString 将（数组）转为本地字符串