js—localstorage (本地存储)必知

HTML API

  1. localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage,存在于 window 对象中:localStorage 对应 window.localStorage,sessionStorage 对应window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期

基本用法

  1. localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。
  2. sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。

生存期

  1. localStorage理论上来讲是永久有效的,即不主动清空的话就不会消失,即便保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。但须要注意的是,在移动设备上的浏览器或各Native App用到的WebView里,localStorage都是不可靠的,可能会由于各类缘由(好比说退出App、网络切换、内存不足等缘由)被清空。
  2. sessionStorage的生存期顾名思义,相似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。因为sessionStorage的生存期过短,所以应用场景颇有限,但从另外一方面来看,不容易出现异常状况,比较可靠。

数据结构

  1. localstorage为标准的键值对(Key-Value,简称KV)数据类型,简单但也易扩展,只要以某种编码方式把想要存储进localstorage的对象给转化成字符串,就能轻松支持。
  2. 举点例子:把对象转换成json字符串,就能让存储对象了;把图片转换成DataUrl(base64),就能够存储图片了。另外对于键值对数据类型来讲,"键是惟一的"这个特性也是至关重要的,重复以同一个键来赋值的话,会覆盖上次的值。

容量限制

目前业界基本上统一为5M,已经比cookies的4K要大不少了html

域名限制

因为浏览器的安全策略,localstorage是没法跨域的,也没法让子域名继承父域名的localstorage数据,这点跟cookies的差异仍是蛮大的。web

异常处理

localstorage在目前的浏览器环境来讲,还不是彻底稳定的,可能会出现各类各样的bug,必定要考虑好异常处理。我我的认为localstorage只是资源本地化的一种优化手段,不能由于使用localstorage就下降了程序的可用性,那种只是在console里输出点错误信息的异常处理我是绝对反对的。localstorage的异常处理通常用try/catch来捕获/处理异常json

JavaScript 存储对象

存储对象方法

  1. key(n) 返回存储对象中第 n 个键的名称
  2. getItem(keyname) 返回指定键的值
  3. setItem(keyname, value) 添加键和值,若是对应的值存在,则更新该键对应的值。
  4. removeItem(keyname) 移除键
  5. clear() 清除存储对象中全部的键

借鉴地址跨域