对象与字符串互转，localStorage 和 sessionStorage用法

最新推荐文章于 2024-06-28 07:50:49 发布

原创最新推荐文章于 2024-06-28 07:50:49 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文深入讲解了JavaScript中localStorage和sessionStorage的使用方法，包括数据的保存、读取、删除等操作，以及如何检查浏览器是否支持这两种存储方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var site = new Object;
site.sitename = "mysite" ;
site.siteurl  = "www.baidu.com" ;
var str = JSON.stringify(site); // 将对象转换为字符串


var site = JSON.parse(str);   //转字符串转成对象

//保存数据  
function save(){  
    var site = new Object;
    site.keyname = document.getElementById("keyname").value;
    site.sitename = document.getElementById("sitename").value;  
    site.siteurl = document.getElementById("siteurl").value;
    var str = JSON.stringify(site); // 将对象转换为字符串
    localStorage.setItem(site.keyname,str);  
    alert("保存成功");
}  
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var str = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");
    var site = JSON.parse(str);  
    find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
}

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);