Use of the local storage localstorage and its encapsulated interface Store.js

Local Storage Localstorage

localstorageHTML5 is a 客户端 new method of storing data that is stored in the client, and the data is 永久保存 , unless human intervention is removed.

localstorageUsed as local storage solves the problem of cookie insufficient storage space: Each cookie has a storage space of cookie 4k, but localStorage the storage space is 5 m in size. In addition, compared to cookies localStorage , 节约带宽 in the same domain, every time the browser sends a request to the server, HTTP will take a cookie, allowing the cookie to be passed back and forth between the browser and the server, wasting bandwidth, However, Localstorage stores the data of the first request directly to the local and avoids passing back and forth.

The limitations of Localstorage
1, only the higher version of the browser is supported Localstorage
2. The type of the Localstorage value is limited to type string, and JSON conversion is required when used
3, if the storage of excessive content will consume memory space, resulting in the page card, because Localstorage is essentially a string read

There are two ways of Localstorage: the localstorage and sessionStorage . sessionStoragemethod 针对一个 session for data storage. When the user closes the browser window, the data is deleted. The only difference between Localstorage and Sessionstorage is that localstorage belongs to persistent storage, and sessionstorage key-value pairs in sessionstorage are emptied when the session ends.

The use of Localstorage
When we use localstorage, we need to first determine whether the browser supports localstorage this property:

if(window.localStorage){ alert("浏览器支持localStorage");  }else{ alert("浏览器支持localStorage"); }?

The next is its write, read, delete

Write to Localstoragevar storage=Window.localstorage; storage["A"]=1;Write a field storage.b=2;Write B field Storage.setitem ("C", 3);Write to the C field console.Logtypeof storage["a"]);String Console.Logtypeof storage[ "B"]); //string console. log (typeof storage[ "C"]);? //string //localstorage read var A =storage.a; Console. log (a); //1var b=storage[ "B"]; console.< Span class= "hljs-built_in" >log (b); //2var c=storage.getitem ( "C"); Console. log (c);? //3//localstorage delete storage. Clear (); //clear all contents of Localstorage           

Use the key () method to get the corresponding key

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); //a c }?

Count the number of times a user has visited a page:

if(localStorage.pagecount){ localStorage.pagecount = Number(localStorage.pagecount)+1; }else{ localStorage.pagecount = 1; } document.write("你第"+localStorage.pagecount+"访问该页面");?

The usage of sessionstorage is the same as the Localstorage usage and localstorage, but the count is restarted when the Count page is closed and then opened.

Store.js

Store.js is a localstorage wrapper compatible with all browsers and does not need to be implemented with cookies or flash. It provides a very concise API to enable cross-browser local storage capabilities.

Use of Store.js

The basic APIs for Store.js are:

store.set(key, val)  //存储 key 的值为 val；store.get(key)  //获取 key 的值；store.remove(key) //移除 key 的记录；store.clear() //清空存储；store.getAll() //返回所有存储；store.forEach() //遍历所有存储。

Using the method provided by Store.js, you need to first introduce a store.min.js plugin:

<script type="text/javascript" src="store.min.js"></script> 

First, determine if the browser supports local storage

<script type="text/javascript"> init(); function init(){ if(!store.enabled){ alert("你的浏览器不支持本地存储，请使用更高版本的浏览器"); return; }else{ ...... } </script> 

Set
Single stored characters
Format:store.set(key, data[, overwrite]);

store.set(‘name‘,‘mavis‘); //存储name的值为 mavisstore.set(‘name‘,‘angel‘); //将name的值存储为angel

On the console display

Get
Get the key value stored
Format:store.get(key[, alt])

store.set(‘name‘,‘mavis‘);store.set(‘name‘,‘angel‘);store.get(‘name‘); //angel

Remove
Remove a key record

store.remove(‘name‘);

You can see that the value of name has been removed from the console

Clear
Clear all Local storage:store.clear();

GetAll
Get values from all storage
Format:store.getAll()

store.set(‘name‘,‘mavis‘);store.getAll().user.name == ‘mavis‘; //true

Foreach
Iterate through all the values

store.set(‘user‘,{name:‘mavis‘,likes:‘javascript‘}); // 存储对象 - 自动调用 JSON.stringifyvar user = store.get(‘user‘); // 获取存储的对象 - 自动执行 JSON.parsestore.forEach(function(key, val) { console.log(key, ‘==‘, val) }) // 遍历所有存储

使用store,js简化了使用localStorage原生方法的操作LocalStorage 并没有提供过期时间接口，只能通过存储时间做比对实现。

Use of the local storage localstorage and its encapsulated interface Store.js