sessionstorage对象执行clear方法后

Posted 2023-05-16

sessionStorage

可以使用expando属性设置存储器中的值。

sessionStorage.mykey = "22";

sessionStorage['mykey']="11";

sessionStorage设置和获取的调用不必出现在同一个网页中。只要网页是通院的（包括规则、主机和端口），基于相同的键，我们都能够在其他网页中获得设置在sessionStorage上的数据。在对同一页面后续多次加载的情况下也是如此。

sessionStorage数据只要浏览器窗口（或标签）不关闭他们就会一直存在。

注：牢记浏览器有时会重新定义窗口或标签页的生命周期。例如，当浏览器崩溃或用户关闭已打开的多个标签页时，一些浏览器会保存并恢复当前会话。在这些情况下，浏览器在重启或恢复时，可能会选择保存相关的sessionStorage。所以，sessionStorage实际上可能会比你想象的更“长寿”！

html5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。

localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value

2、获取：localStorage.getItem(key)
如果key不存在返回null

3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除

4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);

6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象

备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

添加事件监听器即可接受同源窗口的Storage事件(共享窗口 localStorage有用、sessionStorage不可用)

function displayStorageEvent(e)var logged="key:"+e.key+",newVlaue:"+e.newVlaue+",oldValue:"+e.oldValue+",url:"+e.url+",storageArea:"+e.storageArea;alert(logged);
window.addEventListener("storage",displayStorageEvent,true)

JSON对象的存储
var data;
function loadData()
　　data = JSON.parse(sessionStorage["myStorageKey"])

function saveData()
　　sessionStorage["myStorageKey"] = JSON.stringify(data);

window.addEventListener("load",loadData,true);
window.addEventListener("unload",saveData,true) ;

页面每次加载时都会调用loadData()函数，用户每次关闭浏览器或窗口时，都会调用saveData()函数。 参考技术A sessionStorage可以使用setItem设置、getItem获取、removeItem删除、clear清空。

MDN解释
sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，**这点和 session cookies 的运行方式不同。
通过sessionStorage保存的数据保存在浏览器中；所以创建一个sessionStorage用过后在某些情况需要清除sessionStorage；

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage和sessionStorage学习小结

常用的API如下表所示：

名称	作用
clear	清空localStorage上存储的数据
getItem	读取数据
hasOwnProperty	检查localStorage上是否保存了变量x，需要传入x
key	读取第i个数据的名字或称为键值(从0开始计数)
length	localStorage存储变量的个数
propertyIsEnumerable	用来检测属性是否属于某个对象的
removeItem	删除某个具体变量
setItem	存储数据
toLocaleString	将（数组）转为本地字符串
valueOf	获取所有存储的数据

清空localStorage

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
    console.log(‘localStorage里存储的第‘+i+‘条数据的名字为：‘+localStorage.key(i)+‘,值为：‘+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty(‘name‘) // true
localStorage.hasOwnProperty(‘sex‘)  // false

将数组转为本地字符串

var arr = [‘aa‘,‘bb‘,‘cc‘]; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

将JSON存储到localStorage里

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}

students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

 

转自:http://www.jianshu.com/p/39ba41ead42e