一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 18:23:41 编辑:袖梨 来源:一聚教程网

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属性

要注意一点,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。

热门栏目