使用 localStorage 创建一个本地存储的 name/value 对，name="lastname" value="Smith", 然后检索 "lastname" 的值，并插入到 id="result" 的元素上:

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

表格中的数字表示支持该属性的第一个浏览器版本号。

JavaScript 存储对象

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
localStorage 的写入有三种方法:
if(！window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
运行后的结果如下：
这里要特别说明一下 localStorage 的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的 localStorage。
最后在控制台上面打印出来的结果是:
不知道各位读者有没有注意到，刚刚存储进去的是 int 类型，但是打印出来却是 string 类型，这个与 localStorage 本身的特点有关，localStorage 只支持 string 类型的存储。
localStorage 的读取
if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
    //第一种方法读取
    var a=storage.a;
    console.log(a);
    //第二种方法读取
    var b=storage["b"];
    console.log(b);
    //第三种方法读取
    var c=storage.getItem("c");
    console.log(c);
这里面是三种对 localStorage 的读取，其中官方推荐的是 getItem\setItem 这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道。
我之前说过localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤。
下面我们就来说一说 localStorage 的删、改这两个步骤。
改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下：
if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*分割线*/
    storage.a=4;
    console.log(storage.a);
这个在控制台上面我们就可以看到已经 a 键已经被更改为 4 了。
localStorage 的删除
1、将localStorage的所有内容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
2、 将 localStorage 中的某个键值对删除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
控制台查看结果:
localStorage 键的获取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
使用 key() 方法，向其中输入索引即可获取对应的键。
localStorage 其他注意事项
 
一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。
if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：
var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
打印出来是 Object 对象。
另外还有一点要注意的是，其他类型读取出来也要进行转换。
ZAA
   ZAA
  234***409908@qq.com
   参考地址
5年前 (2018-09-01)

#0
   不暇
  bux***7@126.com
 53
localstorage 存储 json 格式的方法其实比较简单，比如有 json 数据如下：

var data = {
    test:"text",
    test1:"123456",
    test2:"字段值",
存储方式为如下，将 json 转化为字符串再存入:
localStorage.setItem("data", JSON.stringify(data));
而使用方法则是如下：
var data = localStorage.getItem("data");
data = JSON.parse(data);
取出存储的字段，再重新转化为 json 形式。
以上对于 json 数据同样有效，所以对于一些接口请求的数据可以通过这种方式本地化。
不暇
   不暇
  bux***7@126.com
3年前 (2020-08-26)

            
 HTML / CSS
HTML 教程
HTML5 教程
CSS 教程
CSS3 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Font Awesome 教程
Foundation 教程
 JavaScript
JavaScript 教程
HTML DOM 教程
jQuery 教程
AngularJS 教程
AngularJS2 教程
Vue.js 教程
Vue3 教程
React 教程
TypeScript 教程
jQuery UI 教程
jQuery EasyUI 教程
Node.js 教程
AJAX 教程
JSON 教程
Echarts 教程
Chart.js 教程
Highcharts 教程
Google 地图 教程
 服务端
Python 教程
Python2.x 教程
Linux 教程
Docker 教程
Ruby 教程
Java 教程
C 教程
C++ 教程
Perl 教程
Servlet 教程
JSP 教程
Lua 教程
Rust 教程
Scala 教程
Go 教程
PHP 教程
数据结构与算法
Django 教程
Zookeeper 教程
设计模式
正则表达式
Maven 教程
Verilog 教程
ASP 教程
AppML 教程
VBScript 教程
 数据库
SQL 教程
MySQL 教程
PostgreSQL 教程
SQLite 教程
MongoDB 教程
Redis 教程
Memcached 教程
 数据分析
Python 教程
NumPy 教程
Pandas 教程
Matplotlib 教程
Scipy 教程
R 教程
Julia 教程
 移动端
Android 教程
Swift 教程
jQuery Mobile 教程
ionic 教程
Kotlin 教程
 XML 教程
XML 教程
DTD 教程
XML DOM 教程
XSLT 教程
XPath 教程
XQuery 教程
XLink 教程
XPointer 教程
XML Schema 教程
XSL-FO 教程
SVG 教程
 ASP.NET
ASP.NET 教程
C# 教程
Web Pages 教程
Razor 教程
MVC 教程
Web Forms 教程
 Web Service
Web Service 教程
WSDL 教程
SOAP 教程
RSS 教程
RDF 教程
 开发工具
Eclipse 教程
Git 教程
Svn 教程
Markdown 教程
 网站建设
HTTP 教程
网站建设指南
浏览器信息
网站主机教程
TCP/IP 教程
W3C 教程
网站品质