localStorage – 没有时间限制的数据存储
sessionStorage – 针对一个 session 的数据存储
——————
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
| 代码如下 | 复制代码 |
|
<input id="range" type="range" max="100" min="0" step="1" /> oR.onchange=function(){ document.title=oR.value; localStorage.rangeValue=oR.value; } if(localStorage.rangeValue) { //如果存在就赋值 oR.value=localStorage.rangeValue; } |
|
存储数据的方法就是直接给window.localStorage添加一个属性，
例如：window.localStorage.a 或者 window.localStorage["a"]。
它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
| 代码如下 | 复制代码 |
| localStorage.a = 3;//设置a为"3" localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值 localStorage.setItem("b","isaac");//设置b为"isaac" var a1 = localStorage["a"];//获取a的值 var a2 = localStorage.a;//获取a的值 var b = localStorage.getItem("b");//获取b的值 localStorage.removeItem("c");//清除c的值 localStorage.setItem(key,value); setItem就是保存数据的意思 localStorage.getItem(key) ;，get一词就是带有拿、取出的意思，注意的是getItem里面的参数是key |
|
如何清除掉本地存储数据？
localStorage.clear()，一次性清除： 使用clear()方法会所有保存数据都清除掉，因此此操作是危险性的，除非你真想这么做
localStorage.removeItem(key) 个别清除
localStorage.length； //返回本地数据的长度
获取第 n 个数据的 key 键值则调用key()方法：localStorage.key(n)
localStorage的存储大小以及溢出检测
溢出检测，采用try{ } catch{ }形式来进行捕捉：
| 代码如下 | 复制代码 |
|
try{ localStorage.setItem(key,value); }catch(oException){ if(oException.name == 'QuotaExceededError'){ console.log('已经超出本地存储限定大小！'); // 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存 localStorage.clear(); localStorage.setItem(key,value); } } try…catch 的作用是测试代码中的错误。 try…catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。 |
|
StorageEvent对象会包含下列的属性。
| 属性 | 类型 | 描述 |
|---|---|---|
key |
string | 被修改的键。 |
oldValue |
any | 修改前的值（如果是增加新的键值，则该属性为null） |
newValue |
any | 修改后的值（如果是删除键值，则该属性为null） |
url*
|
string | 触发当前存储事件的页面的url |
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性 |
||
要注意一点，在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。
时间： 2024-09-20 22:53:14