HTML5本地存储(Local Storage) 数据类型是字符串

作者：袖梨 2022-06-25

localStorage – 没有时间限制的数据存储
sessionStorage – 针对一个 session 的数据存储

——————
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

代码如下	复制代码
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 部分包含错误发生时运行的代码。
语法：
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}

word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-">StorageEvent对象会包含下列的属性。

StorageEvent 对象
属性	类型	描述
`key`	string	被修改的键。
`oldValue`	any	修改前的值（如果是增加新的键值，则该属性为null）
`newValue`	any	修改后的值（如果是删除键值，则该属性为null）
`url`^*	string	触发当前存储事件的页面的url
* 注意: `url` 属性早期的规范中为uri`属性。`有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性